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

一切正常，但是如果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')} />

要在 redirect 中实现switch 后备，您需要执行以下操作：

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

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

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

1 个答案: