Почему не работает пользовательский маршрут реакции-роутер-дом? - PullRequest
Новая
       9

Почему не работает пользовательский маршрут реакции-роутер-дом?

0 голосов
/ 17 апреля 2020

Я пытаюсь создать приложение, которое включает в себя как приватную, так и публикуемую c маршрутизацию, поэтому я использую собственные приватные и публичные c маршруты, но дело в том, когда я пытаюсь отправить компонент, это не делается, и я не могу понять, что не так.

Вот ссылка на песочницу, точка входа, т.е. маршруты ссылка , которые обрабатывают публичные c и частные маршруты.

Примечание: Пользовательские функциональные маршруты работают, но не мои маршруты, даже если я пытаюсь передать некоторые пользовательские маршруты, такие как h1 или что-то в этом роде. Но не те, которые я построил.

Ответы [ 3 ]

1 голос
/ 17 апреля 2020

Вы должны использовать «точный» из атрибута Route. Потому что <Switch> проверяет и отображает первый дочерний маршрут, соответствующий местоположению. В этом случае это "/", и все ваши маршруты содержат "/" 

 <PrivateRoute exact path={route.path} component={route.component} />

И затем вы должны отобразить компонент в компоненте свойства внутри вашего массива маршрутов.

Это ваш последний объект частных маршрутов: 

 const routes = [
    {
      path: '/',
      component: <h1>path component</h1>,
    },
    {
      path: '/write',
      component: <UserInfo/>,
    },
    {
      path: '/profile',
      component:<Profile/>,
    },
    {
      path: '/polls',
      component: <ListPolls/>,
    },
    {
      path: '/details',
      component: <UserInfo/>,
    }
]

Поскольку вы используете атрибут "render" Route.

Если вы хотите отправить компонент без, вы должны использовать атрибут "component" в Route, но вы можете использовать только компоненты, а не визуализировать HTML код.

1 голос
/ 17 апреля 2020

Есть две проблемы

  1. Вам нужно дать exact вашим PrivateRoute и PublicRoute
  2. Поскольку вы используете опору render, вам нужно вернуть элемент, а не класс компонента, поэтому что-то вроде <component />, но пользовательские компоненты должны начинаться с заглавной буквы, поэтому вам нужно переименовать это.

обновленный пример

дополнительная проблема заключается в том, что для большинства маршрутов компонент является фактическим компонентом, но для проходящего маршрута / элемент, и поэтому вам нужно визуализировать его по-другому

0 голосов
/ 17 апреля 2020

Вы должны использовать атрибут маршрута "точный" для этого URL '/'

Из документации:

точный - при значении true будет совпадать, только если путь соответствует местоположению .pathname в точности.

Просто внимательно прочитайте документацию о Switch:

Switch - визуализирует первого потомка или соответствует местоположению.

Первый дочерний элемент каждый раз будет тем компонентом 

<PrivateRoute path="/" component={route.component} />;

, потому что сравнение работает по следующему алгоритму: 

'/'.includes('/') // true
'/write'.includes('/') // true

Но с точным свойством он будет работать по следующему сценарию: 

'/' === '/' // true
'/write' === '/' // false
...