使用兩條獨立路徑陣營我目前使用的陣營路由器路由器

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>