有没有办法通过使用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中），应用组件中的嵌套路由不需要另一台路由器，只需声明您的路由即可。