Вложенный маршрут не работает в React

У меня есть два маршрута в App.js

<Switch>
    <MainRoute exact = {true} path = "/" component = {Main} />
    <Route path = "/login" component = {Login} />
</Switch>

В основном компоненте у меня есть:

<div><Link to = "/reviews" /></div>
<div style = {{ height: '1000px' }}>
  {/* Routes */}
  <Switch>
    <Route path = "/reviews" component = {Reviews} />
  </Switch>
</div>

Логин и основной маршрут работают правильно, отображается ссылка. Но после перехода по ссылке страница становится пустой.

PS: Я новичок в React.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
888
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Измените свои маршруты вот так,

<Switch>
    <Route path = "/login" component = {Login} />
    <MainRoute path = "/" component = {Main} />
</Switch>

Сначала он будет соответствовать пути /login, а если он не будет совпадать, он будет соответствовать /. / будет соответствовать как /, так и /reviews. Тебе надо,

  1. удалите exact=true, чтобы / также соответствовал /reviews
  2. измените порядок / и /login, чтобы он сначала пытался сопоставить /login, а затем /

Спасибо, сработало

ashfaq.p 04.06.2018 13:18

Другие вопросы по теме