Question

这是我的路线组件

$ cd service
$ mkdir -p src/test/resources
$ touch src/test/resources/Config.properties
$ mkdir -p src/main/resources
$ mv ../resources/src/main/resources/messages.properties src/main/resources/

$ cd ../view
$ mkdir -p src/test/resources
$ touch src/test/resources/Config.properties

可以从导航栏访问

page1，page2和page3，但只能从每个页面访问DetailPage。我的路径就像： / page1 =＆gt; / articles / 1 ，我希望它是 / page1 =＆gt; / 1页/物品/ 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="articles/:id" component={DetailPage} />
</Route>

还是更好的方式？

EDIT
我的index.js：

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

我的routes.js：

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

实际上，我的大多数页面组件都非常相似。每个页面都接收json对象并迭代一个列表。单击列表中的项目时，您将访问DetailPage组件。

Answer 1

更好的方法是将您的页面配置和参数化为“：page”：

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

可能的回退是验证“page”参数，你可以添加一个检查“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路由器，但我希望你对此持开放态度。您可以看到导航路由器不拥有您的组件，因此您可以使用页面路由参数php-fpm正确的页面组件。如果您对代码有任何疑问，请告诉我们。

ReactDOM.render

如何对多条路线使用相同的路线做出反应？

3 个答案: