在 React Router 中使用两个独立的路径答案

【问题标题】：Using two independent paths in React Router在 React Router 中使用两个独立的路径
【发布时间】：2016-09-08 20:08:13
【问题描述】：

我目前正在使用 React Router，并且有使用 browserHistory 的路由，例如：

import { Router, Route, IndexRedirect, browserHistory } from 'react-router';

<Router history={browserHistory}>
  <Route path="tasks" component={Tasks}>
    <IndexRoute component={List} />
    <Route path="/:id" component={Item} />
  </Route>
</Router>

这让我可以做如下路线：

/tasks/
/tasks/1234

这可行，但我们遇到了一种情况，即我们有两个视图同时显示。我们希望链接可以共享，并让应用同时打开两个视图。

例如，如果我们在屏幕左侧有任务，在右侧有商店，我们希望路径有两个独立的部分，例如：

/tasks/1234/#/shop/item/xyz

shop route 应该独立于 hash 的左侧，tasks route 应该独立于 hash 的右侧，这样/new-feature/xyz/#/shop/item/xyz 仍然应该在窗口右侧呈现相同的视图。

是否可以让 React Router 做这样的路由？还是我必须编写一个自定义路由器来解决这个问题？

我猜我基本上必须将 browserHistory 和 hashHistory 结合在一起，但我认为 React Router 开箱即用是不可能的。

【问题讨论】：

/tasks/1234/#/shop/item/xyz 在我看来就像一条常规的嵌套路由？这个 url 的其他配置是否会破坏像这样的正常嵌套结构？
同意调用嵌套路由，一个处理侧面板，另一个处理内页等？
@azium，嵌套路由需要将/shop 嵌套在/tasks 下。我相信 OP 希望每个部分相互独立，以便您可以导航出/tasks，但仍留在/shop（分别用于页面的左侧和右侧）。
是的，我不认为 react-router 支持线性视图层次结构以外的任何东西。我能想到的最接近的方法是有一条带有left 和right 查询参数的路由，该参数对左右视图的状态进行编码。然后，当路线更改时，由您来呈现正确的视图。
是的，我正在寻找@Chris 提到的东西。我应该说得更清楚。

标签： reactjs react-router

【解决方案1】：

我认为为了处理这种情况而使用自己的路由器可能有点过火了。您可以在路由配置中拥有任意数量的不同路径，并访问组件中的参数信息：

<Router history={browserHistory}>
  <Route path="/" component={App} />
  <Route path="/tasks/:taskId" component={App} />
  <Route path="/shop/:shopId" component={App} />
  <Route path="/tasks/:taskId/shop/:shopId" component={App} />
</Router>

let App = ({ params }) => // simplified
  <div>
    { params.shopId && <Shop /> }
    { params.taskId && <List /> }
  </div>

只是一个想法。我认为有几种方法可以增强它以处理更复杂的场景，但这肯定适用于您在问题中指定的内容（大部分情况下）。

更新：上面是“硬编码”，但当然你不需要手动写出每个组合。这就是循环的用途。

import * as routeComponents from './routeComponents'

<Router history={browserHistory}>
  { routeComponents.map(r => <Route {...r} />) }
</Router>

let App = ({ params }) => 
  <div>
    { routeComponents.reduce((matches, r) => ([
        ...components,
        ...(params[r.slug] ? [r.component] : [])
    ]), [])}
  </div>

【讨论】：

但这只是一个简单的例子，有2个特征，这意味着3个不同的路线。如果有很多特征，我们必须把所有的组合都写出来；更不用说所有的嵌套路由了。
您绝对不需要将它们全部写出来，但您确实需要以某种方式对其进行描述，例如有一个包含索引文件的文件夹来存储您的路由组件。更新了我的答案......如果你真的想要，我也可以用一些嵌套路线和所有爵士乐来解决这个问题。
另外，我认为如果事实证明这还不够，我会考虑从头开始对 React Router 发出拉取请求。 :)

【解决方案2】：

我们已经开发了自己的路由器 Boring Router，支持“并行路由”，尽管它依赖于 MobX，并且在许多方面与 React Router 的工作方式不同。

在 Boring Router 中，并行路由存储为以_ 为前缀的查询字符串参数。例如，/app/workbench?_sidebar=/achievements。

查看完整示例here。

【讨论】：