Javascript React路由器中具有404路由的多条并行路由

以下是我的应用程序中的工作路由示例，其中：

• 在基于
  的组件中的多个位置使用

• 只是
  组件的包装器，它执行一些与用户身份验证相关的逻辑

现在已经解决了上述问题，但是产生了另一个问题。典型的

现在访问

/account

路由不会呈现任何内容。检查React开发工具后，我发现它将组件树计算到

中，并在那里停止

我可以将路由合并到一个路由文件中，并与多个提供商打包，以检查内容并解决问题，但我更愿意保持它的整洁和可读性，以便其他团队成员现在和将来加入

---

在此，我将非常感谢您的帮助。

使用嵌套路由后，您似乎能够实现您的目标：

注释中讨论的伪示例：

<Router history={history}>
  <Switch>
    <Route path='/token' exact={false} component={TokenProvider} />
    <Route path='/' exact={false} component={AuthProvider} />
  </Switch>
</Router>

顶级路由为您的应用程序设置了更高级别的分支点，然后您可以在子组件中拥有额外的路由逻辑。使用此技术可以开发多种解决方案

我发现这是在更大的应用程序中管理路由的一种更具可扩展性的方法，而不是使用一个不断增长的

路由组件

博客文章提供了一个很好的总结，并解释了一些好的实践（例如，使用
match.path
构建子路由）。
以下是我最终的目标：

...
<Router history={history}>
  <TokenProvider>
    <AuthProvider>
      <Switch>
      <Route path='/' exact component={HomePage} />
      <AuthRoute path='/account' exact component={MyAccount} />
      <TokenRoute path='/blabla' exact component={TokenizedStuff} />
      ...
      <Route path='*' exact component={NotFound} />
      </Switch>
    </AuthProvider>
  </TokenProvider>
</Router>
...

。。。
...
...

其中，TokenRoute负责所有标记化的内容，AuthRoute负责所有基于身份验证的内容。通过这种方式我发现的最好的事情是，这些特定的处理只有在特定的路由匹配时才会起作用，否则它就会被忽略

Oliver给出的方法也是分离关注点的另一种好方法，但在现有的大规模应用程序中很难实现。对于任何小型/新应用程序来说，这都是一个很好的起点。
看起来外部交换机并没有真正起到任何作用，如果您不想同时使用两者，您可以用自己的路径包装提供者标记，以便在两者之间切换？您可以从令牌提供程序部分获得基本路由，然后回退到身份验证提供程序。谢谢Oliver。我同意顶层交换机可能不会做任何事情，但那只是一个愚蠢的尝试——走这条路必须是交换机的直接孩子，才能正常工作。你能提供一个你的建议的假例子吗？谢谢奥利弗。我会考虑一下，然后回复。@JabranRafique您对此进行了排序吗？Oliver，不幸的是，我不得不采取不同的方法，这并不理想，但我必须像建议的那样使用令牌提供程序，因为我没有自由使用带前缀路径的路由。虽然我会向任何在项目中从头开始的人推荐这种方法。以下是我最终的目标：```````
...
<Router history={history}>
  <Switch>
    <TokenProvider>
      <TokenRoute path='/blabla' exact component={TokenizedStuff} />
    </TokenProvider>

    <AuthProvider>
      <Route path='/' exact component={HomePage} />
      <AuthRoute path='/account' exact component={MyAccount} />
      ...
      <Route path='*' exact component={NotFound} />
    </AuthProvider>
  </Switch>
</Router>
...

<Router history={history}>
  <Switch>
    <Route path='/token' exact={false} component={TokenProvider} />
    <Route path='/' exact={false} component={AuthProvider} />
  </Switch>
</Router>

...
<Router history={history}>
  <TokenProvider>
    <AuthProvider>
      <Switch>
      <Route path='/' exact component={HomePage} />
      <AuthRoute path='/account' exact component={MyAccount} />
      <TokenRoute path='/blabla' exact component={TokenizedStuff} />
      ...
      <Route path='*' exact component={NotFound} />
      </Switch>
    </AuthProvider>
  </TokenProvider>
</Router>
...