Question

我有两种布局：MainLayout和EmptyLayout用于Login和SignUp组件。

这是我目前的结构：

import { BrowserRouter as Router, Route } from 'react-router-dom';

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/login">
        <EmptyLayout>
          <LogInContainer />
        </EmptyLayout>
      </Route>
      <Route path="/">
        <MainLayout>
          <Switch>
            <Route exact path="/marketing" >
              <MarketingComponent />
            </Route>
            <Route exact path="/dashboard" >
              <DashboardContainer />
            </Route>
            <Route exact path="/admin/users" >
              <UsersContainer />
            </Route>
            <Route exact path="/admin/users/add" >
              <AddUsersContainer />
            </Route>
          </Switch>
        </MainLayout>
      </Route>
    </Switch>
  </Router>
);

这是一个好方法吗？如何在此处添加404页面？

<EmptyLayout>
  <NotFound />
</EmptyLayout>

Answer 1

<Switch/>组件呈现匹配的第一个<Route/>，而<Route/>没有path始终匹配，因此您只需将404内容放入{{1}内} <Route>...</Route>的最后一个孩子。

也就是说，RRv4功能非常强大，因为您可以在应用中的任何位置设置路由，就像在Tyler的回答中一样，您可以在{<Switch/>中处理路由的/add部分。 1}}。一旦relative routes降落，这将更加容易。

反应路由器V4结构

1 个答案: