Вложенные маршруты в React неправильно отображаются с помощью react-router v4

У меня есть основной переключатель корневого компонента, подобный этому

<Provider store={createStoreWithMiddleware(reducers)}>
    <HashRouter history={history} >
      <Switch>
        <Route exact path="/login" name="Login Page" component={Login}/>
        <Route exact path="/register" name="Register Page" component={Register}/>
        <Route exact path="/404" name="Page 404" component={Page404}/>
        <Route exact path="/500" name="Page 500" component={Page500}/>
        <Route path="/Console" name="Console" component={Console}/>
        <Route path="/" name="Home" component={Full}/>
      </Switch>
    </HashRouter>
  </Provider>

И внутри компонента Console у меня есть еще один переключатель, определенный следующим образом.

<main className="container">
  <div className="">
    <Switch>
      <Route path="/Create" name="Create Park" component={CreateNew} />
      <Route path="/" name="Console" component={HomePage} />
    </Switch>
  </div>
</main>

Когда я посещаю /Console HomePage компонент отображается правильно.

Но когда я посещаю компонент /Console/Create CreateNew, он не будет отображаться, а вместо этого будет отображаться компонент HomePage.

Что я здесь делаю неправильно? Что мне сделать, чтобы показать компонент CreateNew в /Console/Create


reactjs javascript react-router-dom react-router
person Sanjeev Malagi    schedule 26.12.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Для вложенных маршрутов должен быть указан абсолютный путь. Вы можете использовать match.path в качестве префикса для вложенного маршрута, чтобы указать путь как абсолютный.

<main className="container">
  <div className="">
    <Switch>
      <Route path={`${match.path}/Create`} name="Create Park" component={CreateNew} />
      <Route path={`${match.path}/`} name="Console" component={HomePage} />
    </Switch>
  </div>
</main>

или указать полный путь

<main className="container">
  <div className="">
    <Switch>
      <Route path="/Console/Create" name="Create Park" component={CreateNew} />
      <Route path="/Console/" name="Console" component={HomePage} />
    </Switch>
  </div>
</main>

Согласно документации React-Router match:

Объект сопоставления содержит информацию о том, как сопоставлен URL-адрес. объекты соответствия содержат следующие свойства:

params - (object) Пары "ключ-значение", извлеченные из URL-адреса, соответствующего динамическим сегментам пути

isExact - (boolean) true, если совпал весь URL (без завершающих символов)

path - (string) Шаблон пути, используемый для сопоставления. Полезно для создания вложенных s

url - (string) Совпадающая часть URL. Полезно для создания вложенных s

person Shubham Khatri    schedule 26.12.2017

arrow_upward
0
arrow_downward

компонент консоли рефакторинг следующим образом:

<main className="container">
      <div className="">
        <Switch>
          <Route exact  path="/" name="Console" component={HomePage} />
          <Route exact  path="/Create" name="Create Park" component={CreateNew} />
    </Switch>
  </div>
 </main>
person Malik Adil    schedule 26.12.2017