javascript - ReactJS router v4 Mobx - 路由器不会重新渲染组件？

Question

我使用 mobx Provider 通过包装 Router 来提供存储

  <Provider {...stores}>
    <BrowserRouter >
    <App />
    </BrowserRouter>
  </Provider>

在App中，我有两个组件，Header和Main。Header 包含指向路由的 Link，Main 包含路由 Switch:

  <div className="main">
      <Route exact path='/' component={Home} />
      <Route exact path='/login' component={Login} />
      {/* <UnvalidatedUserRoute exact path='/login' store={this.props.User} component={Login} /> */}
      <ValidatedUserRoute exact path='/todos' store={this.props.User} component={UserTodos} />
  </div>

ValidatedUserRoute 只是一个确保用户通过身份验证的函数，如果没有，则重定向到主页。

 const ValidatedUserRoute = ({component: Component}, store, ...rest) => (
    <Route 
      {...rest} 
      render={props => 
        store.validated ? (
        <Component {...props} />) : (
          <Redirect to={{
            pathname: "/"
          }}
          />
        )
    } />
  );
  export default ValidatedUserRoute

问题

当我点击链接时，我的 URL 确实发生了变化，但组件没有呈现，就像加载网页时页面停留在首先加载的组件上一样。

        <Link to="/">Home</Link>
        <Link to='/login'>Log In</Link>

Answer 1

如果您使用新的react-router-dom。那么你必须使用库提供的 withRouter Hoc 并用它包装你的组件。

import {withRouter} from 'react-router-dom'

const ValidatedUserRoute = ({component: Component}, store, ...rest) => (
    <Route 
      {...rest} 
      render={props => 
        store.validated ? (
        <Component {...props} />) : (
          <Redirect to={{
            pathname: "/"
          }}
          />
        )
    } />
  );
  export default withRouter(ValidatedUserRoute)

哪个组件负责执行路由。将其包装在 withRouter

中