javascript - React router 嵌套路由 - 如何在没有路由匹配时重定向

Question

我正在构建一个包含三个主要部分的网络应用程序:实际网站、管理部分和用户部分。对于每个部分，我想要一个不同的布局包装器。

这是我现在的代码:

网站包装器

const Website = () => (
  <React.Fragment>
    <NavigationBar />
    <main>
      <div className="container">
        <Switch>
          <Route exact path='/' component={Home}/>
          <Route exact path='/login' component={Login}/>
        </Switch>
      </div>
    </main>
    <FooterBar />
  </React.Fragment>
);

用户包装器

const User = () => (
  <React.Fragment>
    <UserSideBar />
    <main>
      <div className="container">
        <Switch>
          <Route exact path='/u/dashboard' component={UDashboard}/>
          <Route exact path='/u/account' component={UAccount}/>
        </Switch>
      </div>
    </main>
  </React.Fragment>
);

管理包装器

const Admin = () => (
  <React.Fragment>
    <main>
    <div className="container">
      <Switch>
        <Route exact path='/a/dashboard' component={ADashboard}/>
        <Route exact path='/a/payments' component={APayments}/>
        <Route exact path='/a/account' component={AAccount}/>
      </Switch>
    </div>
    </main>
  </React.Fragment>
);

路由器

const Router = () => (
    <BrowserRouter>
      <Switch>
        <Route path="/u" component={User} />
        <Route path="/a" component={Admin} />
        <Route path="/" component={Website} />

        <Redirect from="*" to="/" />
      </Switch>
    </BrowserRouter>
);

一切正常，但如果 url 不匹配任何路由，则它不会重定向到 '/'。我怎样才能做到这一点？

Answer 1

您可以制作一个可重复使用的组件 NoMatch 并将其包含在 Switch 的底部。
例如:

<Switch>
    <Route exact path='/a/dashboard' component={ADashboard}/>
    <Route exact path='/a/payments' component={APayments}/>
    <Route exact path='/a/account' component={AAccount}/>
    <Route component={Notfound} />
</Switch>

确保将其放在最后因此，如果没有匹配到其他路由，则会显示该路由。

---

或者您可以创建一个简单的自定义函数，您可以根据需要重用该函数:

如果未定义的路径不清楚，您可以这样做:

const createRedirect = to => () => <Redirect to={to} />
// ...
<Route path="/*" component={createRedirect('/foo')} />

---

要在 switch 中实现 redirect fallback，您需要做:

<Switch>
  <Route path="/foo" component={Bar}/>
  <Route path="/bar" component={Baz}/>
  <Route render={() => <Redirect to="/foo"/>}/>
</Switch>

---

或者您可以采用更长的方法并以编程方式重定向。这是可重用组件的引用，或者至少是您可以根据需要实现的可重用逻辑:Reference