reactjs - 如何正确设置 React 路由？

Question

我正在使用 React 构建应用程序并且我正在使用 React 路由。

我有 3 条主要路线:

• 如果用户已登录，则显示仪表板
• 如果用户没有登录，显示登录页面
• 如果用户点击登录页面上的忘记密码，更改 url 并显示忘记密码页面

index.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')
);

App.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，也不会显示忘记密码页面。

如何正确设置？

Answer 1

您需要重新订购您的开关:

<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>
)}

(尽管将所有路由保留在顶级路由器/交换机中可能更简单)