Как использовать один и тот же маршрут для нескольких маршрутов в реакции?

Question

Это мой маршруты компонент

<Route path="/" component={App}> 
    <IndexRoute component={Home}/> 
    <Route path="page1" component={Page1}/> 
    <Route path="page2" component={Page2}/> 
    <Route path="page3" component={Page3}/> 
    <Route path="articles/:id" component={DetailPage} /> 
</Route> 

стр.1, стр.2, и page3 может быть доступен из панели навигации, но DetailPage может быть доступен только с каждой страницы. Мой путь был бы таким: /page1 =>/articles/1, и я хочу, чтобы это было /page1 =>/page1/articles/1
Есть ли способ установить текущий путь в компоненте маршрута например:

<Route path="/" component={App}> 
    <IndexRoute component={Home}/> 
    <Route path="page1" component={Page1}/> 
    <Route path="page2" component={Page2}/> 
    <Route path="page3" component={Page3}/> 
    <Route path="currentPath/articles/:id" component={DetailPage} /> 
</Route> 

или любой другой способ?

EDIT
мой index.js:

ReactDOM.render(
    <Provider store={store}> 
     <Router history={browserHistory} routes={routes} /> 
    </Provider> 
    , document.getElementById('app') 
) 

мой routes.js:

export default { 
    <Route path="/" component={App}> 
     <IndexRoute component={Home}/> 
     <Route path="page1" component={Page1}/> 
     <Route path="page2" component={Page2}/> 
     <Route path="page3" component={Page3}/> 
     <Route path="currentPath/articles/:id" component={DetailPage} /> 
    </Route> 
} 

В самом деле, большинство моих компонентов страниц очень похожи. каждая страница получает json-объекты и выполняет итерацию списка. Когда вы нажимаете элемент в списке, вы получаете доступ к компоненту DetailPage.

Answer 1

Лучший способ заключается в настройке и параметризуем ваши страницы, как «: страница»:

<Route path="/" component={App}> 
    <IndexRoute component={Home}/> 
    <Route path=":page/" component={PageComponent}> 
    <Route path="articles/:id/" component={DetailPage} /> 
    </Route> 
</Route> 

Возможный запасной вариант этого заключается в проверке параметра «страница», и вы можете добавить проверку на «PageComponent», чтобы определить набор проверок [page1, page2, page3 и т. д.], который перенаправляет или что-то, что вы хотите сделать с ним

Answer 2

Вот основные настройки для достижения того, что вы предлагаете:

<Route path="/" component={App}> 
    <IndexRoute component={Home}/> 
    <Route path="page1" component={Page1}> 
    <Route path="articles/:id" component={DetailPage} /> 
    </Route> 
    <Route path="page2" component={Page2}> 
    <Route path="articles/:id" component={DetailPage} /> 
    </Route> 
    <Route path="page3" component={Page3}> 
    <Route path="articles/:id" component={DetailPage} /> 
    </Route> 
</Route> 

Answer 3

Я написал JsFiddle, который показывает, как build your example. Он использует Navigation router вместо React Router, но я надеюсь, что вы открыты к этому. Вы можете видеть, что навигационный маршрутизатор не владеет вашими компонентами, поэтому вы можете ReactDOM.render использовать правую страницу, используя параметр маршрута страницы. Если у вас есть какие-либо вопросы по поводу кода, пожалуйста, дайте мне знать.

var {StateNavigator} = Navigation; 
var {RefreshLink} = NavigationReact; 

var App = ({stateNavigator}) => (
    <div> 
    <RefreshLink 
     navigationData={{page: 'page1'}} 
     stateNavigator={stateNavigator}> 
     Page 1 
    </RefreshLink> 
    <RefreshLink 
     navigationData={{page: 'page2'}} 
     stateNavigator={stateNavigator}> 
     Page 2 
    </RefreshLink> 
    <div id="page"></div> 
    </div> 
) 

var Page1 = ({id, stateNavigator}) => (
    <div> 
    <h1>Page 1</h1> 
    <RefreshLink 
     navigationData={{id: 1}} 
     includeCurrentData={true} 
     stateNavigator={stateNavigator}> 
     Show Article 
    </RefreshLink> 
    {id ? <DetailPage id={id} /> : null} 
    </div> 
); 

var Page2 = ({id, stateNavigator}) => (
    <div> 
    <h1>Page 2</h1> 
    <RefreshLink 
     navigationData={{id: 1}} 
     includeCurrentData={true} 
     stateNavigator={stateNavigator}> 
     Show Article 
    </RefreshLink> 
    {id ? <DetailPage id={id} /> : null} 
    </div> 
); 

var DetailPage = ({id}) => <h2>Article {id}</h2> 

var stateNavigator = new StateNavigator([ 
    {key: 'example', route: '+/{page?}+/articles/{id}', defaultTypes: {id: 'number'}} 
]); 

ReactDOM.render(
    <App stateNavigator={stateNavigator} />, 
    document.getElementById('container')); 

var pages = { 
    'page1' : Page1, 
    'page2' : Page2, 
} 
stateNavigator.states.example.navigated = (data) => { 
    var Page = pages[data.page]; 
    if (Page) { 
    ReactDOM.render(
     <Page id={data.id} stateNavigator={stateNavigator} />, 
     document.getElementById('page')); 
    } 
}; 

stateNavigator.start();