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/
/tasks/1234

这很有效，但是我们遇到了两个同时显示的视图的情况。我们希望链接可以共享，并让应用程序以两种视图打开。

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

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

商店路线应该独立于散列的左边，并且任务路线应该独立于散列的右边，因此/new-feature/xyz/#/shop/item/xyz仍然应该在窗口的右侧渲染相同的视图

是否可以让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>

Answer 2

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

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

查看完整的示例here。

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

2 个答案: