我正在使用 React 构建一个应用程序，并且正在使用 React 路由。
我有3条主要路线：
索引.js
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<Suspense fallback={<div>Loading...</div>}>
<div>
<Switch>
<Route path="/" component={App} />
<Route path="/login" component={Login} />
<Route path="/forgotPassword" component={ForgotPassword} />
</Switch>
</div>
</Suspense>
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
应用程序.js
{this.props.location.pathname === "/" && <Dashboard />}
<Route exact path="/users" component={Users} />
<Route path="/users/:id" component={UserPage} />
{!authenticated && <Redirect to="/login" />}
当我尝试打开时"/"，它重定向到"/login"但不呈现Login组件。
当我{!authenticated && <Redirect to="/login" />}用{!authenticated && <Login>}它替换时会正确呈现组件，但它不会更改 url，也不会显示 ForgotPassword 页面。
我该如何正确设置？
您需要重新订购您的交换机：
<Switch>
<Route path="/login" component={Login} />
<Route path="/forgotPassword" component={ForgotPassword} />
<Route path="/" component={App} />
</Switch>
然后，也许把它做成App类似的东西
{!authenticated ? <Redirect to="/login" /> : (
<Switch>
<Route path="/users/:id" component={UserPage} />
<Route exact path="/users" component={Users} />
<Route path="/" component={Dashboard />
</Switch>
)}
（尽管将所有路由保留在顶级路由器/交换机中可能会更简单）
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句