Is there a way to force update components by url changing using redux and react-router?

Question

I'm setting up a student social network application. I am using react, redux and react router. My feed list component keep the student id from url. When i use from react router, my component do not update.

I read this article https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md and tried to wrap my components in 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));

I expect to have update of the component each Time i click on a link to an other feedPage.

I someone have an idea about how to resolve the issue, i would be enjoing it :)

Answer 1

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