@ reach / router вложенный защищенный маршрут - PullRequest
Новая
       70

@ reach / router вложенный защищенный маршрут

0 голосов
/ 12 марта 2020

Я использую досягаемость / маршрутизатор с настраиваемым защищенным маршрутом, как это: 

const ProtectedRoute = ({ component: Component, ...rest }) => (
  localStorage.getItem('user_id') ? <Component {...rest} /> : <Redirect from="" to="/login" noThrow />
);

const LoginRoute = ({ component: Component, ...rest }) => (
  localStorage.getItem('user_id') ? <Redirect from="" to="/home" noThrow /> : <Component {...rest} />
);

const PublicRoute = ({ component: Component, ...rest }) => (
  <Component {...rest} />
);

<Router>
  <LoginRoute component={Login} path="/login" />
  <PublicRoute default component={Notfound} />

  <ProtectedRoute component={landingPage} path="/home" />
  <ProtectedRoute path="/" component={App} />
  <ProtectedRoute component={UserList} path="user" />
  <ProtectedRoute component={UserDetail} path="user/create" />
</Router>

я хочу, чтобы это был вложенный маршрут с user/:id

<ProtectedRoute component={UserList} path="user" />
<ProtectedRoute component={UserDetail} path="user/create" />

что мне делать?

1 Ответ

2 голосов
/ 12 марта 2020

Я чувствую, что вы усложняете вещи 


const Routes = () => {
  const [loggedIn, setLoggedIn] = useState(false)

  useEffect(() => {
    localStorage.getItem('user_id') && setLoggedIn(true)
  }, [])

return (
  <Router>
    <LoginRoute component={Login} path="/login" />
    <Notfound default />

    {
      loggedIn 
      ? (
        <>
         <LandingPage path="/home" />
         <App path="/" component={App} />
         <UserList component={UserList} path="user">
           <UserDetail component={UserDetail} path="create" />
         </UserList>
        </>
       ) : (
        <Redirect from="" to="/login" noThrow />
       )
      }
     </Router>
  )
}

Если это не сработало как задумано, или вы чувствуете, что хотите использовать это по-своему, сделайте это 


<Router>
  ...
  <ProtectedRoute component={UserList} path="user">
    <UserDetail path="create" />
  </ProtectedRoute>
</Router>

Нет необходимости использовать ProtectedRoute HO C для UserDetail, поскольку он уже вложен в ProtectedRoute

, а в UserList используйте props.children для рендеринга UserDetail

...