reactjs - 在 React Router 中使用两个独立的路径

Question

我目前正在使用 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/1234

这可行，但我们遇到过同时显示两个 View 的情况。我们希望链接可共享，并以两种 View 打开应用程序。

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

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

商店路由应该独立于哈希的左侧，任务路由应该独立于哈希的右侧，因此 /new-feature/xyz/#/shop/item/xyz 仍应在窗口右侧呈现相同的 View 。

React Router 可以做这样的路由吗？或者我必须编写一个自定义路由器来解决这个问题？

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

Answer 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>