使用两条独立路径阵营我目前使用的阵营路由器路由器

Question

，并有使用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

这工作，但我们已经来到ACR在一个情况下，我们有两个视图同时显示。我们希望该链接可以分享，并让应用以两种视图打开。

因此，举例来说，如果我们在屏幕左侧的任务，并在右侧的店铺，我们想为了有路径的两个独立的部分，是这样的：

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

店铺的路线应该是独立的散列的左侧和任务路线应该是独立的哈希权，使/new-feature/xyz/#/shop/item/xyz还是应该上呈现的右侧相同的看法窗口。

是否有可能让React Router做这样的路线？或者我将不得不编写一个自定义路由器来解决这个问题？

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

Answer 1

我认为只是为了处理这种情况而滚动你自己的路由器可能会有点过分。你可以有很多不同的路径在你的路线配置，只要你想，在你的组件的访问PARAM信息：

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