Question

我正在使用react-router来管理应用程序的路由。

我的应用程序分为两个面板，我想独立路由它们。就像改变路线一样，只会改变一个面板或另一个面板。

我尝试了类似这样的内容，但如果我将路由从/conversations更改为/conversations/xxxxxx，则会重新加载旁边组件。

export default (
  <div>
    <Route path="login" component={Login} />
    <Route path='/' component={requireAuthentication(Messenger)}>
      <Route path='/conversations' components={{side: ConversationContainer, main: DefaultPanel}} />
      <Route path='/conversations/:conversationId' components={{side: ConversationContainer, main: ActiveConversation}} />
      <Route path='/ended-conversations' components={{side: EndedConversationContainer, main: DefaultPanel}} />
      <Route path='/ended-conversations/:conversationId' components={{side: EndedConversationContainer, main: ActiveConversation}} />

      <Redirect from="/" to="/conversations" />
    </Route>
  </div>
);

编辑：例如，让我们说/settings，我想更改左侧面板而不更改右边的任何内容以显示新组件代替ConversationContainer示例

我希望有点清楚。有办法用路由器吗？否则我可能需要使用状态。

非常感谢

Answer 1

React路由器可帮助您通过嵌套路由实现此目的。配置路由后，所需的只是在任何具有嵌套路由的路由的render方法中访问// router.js <Route path="conversations/:conversationid component={Conversation}> // ".../conversations/1234" <Route path="began" component={BeginConversation} /> // ".../conversations/1234/began" <Route path="ended" component={EndConversation} /> // ".../conversations/1234/ended" </Route> // Conversation.js render() { // In the render method of the component matching the container route <div> <div className="left-panel"> // Format left panel... this will not change on route began/ended route change </div> { this.props.children } // Tells react the render child components passed from your nested routes </div>。确切地将哪些子组件传递给组件由路由配置决定。

JS_Parse_Error {
  message: 'Unexpected token operator «=», expected punc «,»',
  filename: '../../.tmp/concat/scripts/scripts.js',
  ...

以下是一些有用的资源！

使用独立组件路由实现应用程序

1 个答案: