有没有办法通过使用redux和react-router更改URL来强制更新组件？

Question

我正在设置一个学生社交网络应用程序。我正在使用react，redux和react路由器。我的供稿列表组件保留了来自URL的学生ID。当我从React Router使用时，我的组件不会更新。我阅读了这篇文章https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md并尝试将我的组件包装在withRouter中。index.js：ReactDOM.render(    <Provider store={store}>        <Router>            <Route path="/" component={App} />            <Route exact path="/sign/In" component={SignIn} />            <Route exact path="/sign/Up" component={SignUp} />        </Router>    </Provider>, document.getElementById('root'));App.js：class App extends Component {  render() {    return (      <Router id="Page" >        <div className={this.props.AppStore.Theme}>           <header>            <NavBar />          </header>          <Route exact path="/" component={HomePage} />          <Route exact path="/@:id" component={feedpage} />        </div>      </Router>    );  }}const mapStateToProps = (state) => {  return state}export default withRouter(connect(mapStateToProps)(App));feedPage.js：class feedPage extends Component {  componentDidMount() {    const {dispatch} = this.props;    API.requireFeed(this.props.match.params.id,"profil",20)    .then((res) => {      if(res){        dispatch(postList(res));      }    })  }  render() {    return (      <div id="Page">        <div id="mainPage">          <div id="centralCard">            {this.props.postList.map((element) => (              <div>                <Link to={'/@'+element.Pseudo}>{element.Pseudo}</Link>                <p>{element.Content}</p>              </div>            ))}          </div>        </div>      </div>    );  }}const mapStateToProps = (state) => {  return state}export default withRouter(connect(mapStateToProps)(feedPage));我希望每次单击指向另一个feedPage的链接时都会更新该组件。我有人对如何解决这个问题有一个想法，我会很喜欢的:)

Answer 1

您应该只有一个路由器组件（在index.js中），应用组件中的嵌套路由不需要另一台路由器，只需声明您的路由即可。