如何在React中设置路由和重定向

Question

我正在用React构建一个应用程序，并使用React -router-dom。

我目前的设置在大多数情况下工作，但它无法渲染，如果路线是未知的，我不认为我在使用最佳实践。

这是我的:

index.js

ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<Suspense fallback={<div>Loading...</div>}>
<Route path="/" component={Main} />
</Suspense>
</BrowserRouter>
</Provider>,
document.getElementById('root')
);

然后在我的Main.js类组件中，如果用户没有经过身份验证，我渲染登录页面和this.props.history.push('/login')。如果用户经过身份验证，我有以下路由:

{this.props.location.pathname === '/' || this.props.location.pathname.endsWith('dashboard') && <Dashboard />}
<Switch>
{
userAdmin &&
<React.Fragment>
<Route exact path="/users" component={Users} />
<Route path="/users/:id" component={User} />
</React.Fragment>
}
{
productAdmin &&
<React.Fragment>
<Route exact path="/products" component={Products} />
<Route path="/products/:id" component={Product} />
</React.Fragment>
}
<Route component={Dashboard} />
</Switch>

如果路由不匹配，我想将认证用户重定向到/并呈现Dashboard。

我加入了<Route component={Dashboard} />，它不起作用。我也尝试了<Redirect to="/dashboard" />，但它没有做任何事情。我试图删除交换机，然后它似乎像预期的那样工作，但每当我试图直接访问任何其他现有路由时，它也会重定向。

我应该如何正确设置这个?

Answer 1

对于需要认证的路由，您可以创建一个PrivateRoute的抽象，接受一些permissions、route和Component作为道具。它将检查用户是否具有这些权限，并将重定向到route，否则将重定向到默认页面。参考:创建私有路由

对于所有人都可以访问的页面，可以使用react-router的Route组件。

您可以通过以下方式设置Routes组件:

...
<Switch>
<PrivateRoute permission={userAdmin} route="/users" component={Users} /> 
<PrivateRoute permission={productAdmin} route="/products" component={Products} />
<Route path="/" component={Dashboard} />
//some more routes
</Switch>

你的index.js只需要渲染Routes组件

ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<Suspense fallback={<div>Loading...</div>}>
<Routes />
</Suspense>
</BrowserRouter>
</Provider>,
document.getElementById('root')
);