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

Question

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

这是我现在的代码:

网站包装

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

一切正常,但如果网址与任何路由不匹配,则不会重定向到'/'.我怎样才能做到这一点？

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

要在 a 中实现redirect 回退switch，您需要执行以下操作：

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

或者您可以采用更长的方法并使其以编程方式重定向。这是一个可重用组件的参考，或者至少是您可以根据需要实现的可重用逻辑：参考