Использование точной опоры с реагирующим маршрутизатором - PullRequest
Новая
       3

Использование точной опоры с реагирующим маршрутизатором

1 голос
/ 20 февраля 2020

Я создаю личный маршрут следующим образом. 

const PrivateRoute = (props) => {
  const { component: Component, path } = props;
  const isAuthenticated = true;

  return (
    <Route
      // exact (1)
      path={path}
      render={() => (
        isAuthenticated
          ? (
            <Component />
          )
          : (
            <Redirect
              to="/"
            />
          ))}
    />
  );
};

Я реализую в файле приложения js следующим образом. 

 <Router>
      <Switch>
        <PrivateRoutes
          // exact (2)
          path="/users"
          component={Users}
        />
        <PrivateRoutes
          // exact (3)
          path="/users/add"
          component={AddUser}
        />
      </Switch>
 </Router>

Я заметил следующее поведение, основанное на том, что я комментировал ключевое слово точный в местоположении (1), (2), (3)

  • Когда прокомментированы 1,2,3, компонент AddUser доступен для просмотра, когда i go до / users / add
  • Когда прокомментировано только 2,3, AddUser Компонент дает пустой белый экран, когда я go до / users / add
  • Когда комментируется только 1, компонент AddUser можно просмотреть, когда i go до / users / add
  • Когда 1,2,3 not прокомментировал, компонент AddUser можно просмотреть, когда i go to / users / add

Я думал, что нам нужно только передать точное ключевое слово в Компонент Маршрута, который мы импортируем из response-router. Однако в одном из вышеперечисленных случаев не ставится точный on приводит к тому, что компонент AddUsers не отображается.

В чем причина этого поведения?

1 Ответ

0 голосов
/ 20 февраля 2020

React-router соответствует первому маршруту, поэтому вам нужно отсортировать компоненты маршрутов по самым сложным сверху, например:

  • / очень / сложный / маршрут
  • / очень / сложный
  • / очень

Проблема, с которой вы столкнулись в своем коде, заключается в том, что вы не передаете реквизиты компонента ...rest компоненту. Это должно быть что-то вроде этого: 

const PrivateRoute = ({ children, ...rest }) => {
 return (
   <Route
     {...rest}
     render={props =>
      auth.isAuthenticated ? (
        children
      ) : (
        <Redirect
          to={{
            pathname: '/login',
            state: { from: props.location },
          }}
        />
       )
     }
   />
  )

Обратите внимание, что ...rest содержит "точную" опору, которая определена в вашем, так что вам не нужно определять ее дважды - один раз в PrivateRoute и однажды в Трассе. Так что, когда вы указываете это в 1, а не в 2,3, это не имеет значения, но противоположное имеет значение, потому что «точный» - опора Надежды, это помогает!

...