Question

我通过包装Provider

使用mobx 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

中

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

1 个答案: