Question

假设我有一个使用react-router-dom的应用

App.js

class App extends Component {
   render() {
      return (
        <Fragment>
          <Switch location={location}>
            <Route exact path="/" component={LoginPage} />
            <Route loggedIn={loggedIn} path="/dashboard" component={Dashboard} location={location} />
          </Switch>
        </Fragment>
      )
   }
}

然后在我的仪表板组件中有一个链接，但是我希望该链接仅根据match.params.id

的匹配项来更新我的ChatConversation组件。

Dashboard.js

<Fragment>
  <Left>
    <SettingsMenu />
    <ConversationsContainer />
  </Left>
  <Right>
    <Route path="/dashboard/conversations/:id" component={ChatConversation} />
  </Right>
</Fragment>

有没有办法做到这一点，使得只有我的组件ChatConversation会更新，而不会更新位于我的App.js开关内的整个应用程序组件？

ChatConversation.js

<Fragment>
  Conversation ID: {match.params.id}
</Fragment>

针对特定组件的React Router Links

0 个答案: