Reactjs 如何在react中管理路由

我是react应用程序，我想管理我的路线。我想妥善处理公共和私人路线。我做了一些调查，但现在我感到困惑。有很多方法，但我想知道如何以正确的方式处理它

我发现这个组件可以处理私有路由

import React from 'react';
import { Redirect, Route } from 'react-router-dom';

const PrivateRoute = ({ component: Component, user, ...rest }: any) => (
  <Route
    {...rest}
    render={(props: Object) => (user ? <Component {...props} /> : <Redirect to='/login' />)}
  />
);

export default PrivateRoute;

从“React”导入React；
从“react router dom”导入{Redirect，Route}；
const privaterout=（{component:component，user，…rest}:any）=>(
（用户？：）}
/>
);
导出默认私有路由；

然后它可以按如下方式使用

<Switch>
 <Route exact path='/login' render={() => setHomePage('login')} />
 <Route exact path='/register' render={() => setHomePage('register')} />
 <PrivateRoute user={auth.user} exact path='/dashboard' component={Dashboard} />
</Switch>

setHomePage（'login'）}/>
setHomePage（'register'）}/>

或者我可以像这样走

let routes = (
      <Switch>
        <Route path="/auth" component={asyncAuth} />
        <Route path="/" exact component={BurgerBuilder} />
        <Redirect to="/" />
      </Switch>
    );

    if ( this.props.isAuthenticated ) {
      routes = (
        <Switch>
          <Route path="/checkout" component={asyncCheckout} />
          <Route path="/orders" component={asyncOrders} />
          <Route path="/logout" component={Logout} />
          <Route path="/auth" component={asyncAuth} />
          <Route path="/" exact component={BurgerBuilder} />
          <Redirect to="/" />
        </Switch>
      );
    }

    return (
      <div>
        <Layout>
          {routes}
        </Layout>
      </div>
    );

let routes=(
);
如果（this.props.isAuthenticated）{
路线=(
);
}
返回(
{routes}
);

处理这个问题的更好方法是什么？或者还有其他优雅的方式吗？

第一种更好：

setHomePage（'login'）}/>
setHomePage（'register'）}/>

有

组件，如果没有经过身份验证的用户，此组件将用户重定向到

/login

页面

第二条： 第二，如果用户未通过身份验证，则所有路径（如

签出

，

订单

）都将指示为未找到