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

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

1 个答案: