<Link> 在私有/公共路由和 redux 集成后不会重新渲染组件答案

【问题标题】：<Link> wont re-render a component after Private/Public routing and redux integration<Link> 在私有/公共路由和 redux 集成后不会重新渲染组件
【发布时间】：2018-11-05 15:00:51
【问题描述】：

更新：我在 codepen https://codesandbox.io/s/yjl2j4ko9上传了一个演示

我在 AppRouter 内部有一个来自 material-ui css lib（管理控制面板）的抽屉。我使用<Link> 导航槽部分，但在集成redux 和公共/私有路由后<Link> 仅更改URL 而不会重新呈现抽屉内的组件。如果我刷新页面，重新渲染就可以了。这是我的路由器：

<Router history={history}>
<div>
      <Switch>
            <PublicRoute path="/" component={LoginPage} exact={true} />
            <PrivateRoute path="/Control" component={Control} />
            <PrivateRoute path="/Persons" component={Persons} />
            <PrivateRoute path="/Graphs" component={Graphs} />

        </Switch>
  </div>

我的旧路线（没有私有/公共路径）运行良好。例如：

    <Route path="/Controls" render={()=><Controls/>}/>

我已经在 privateroute.js 中尝试过 pure:false，我可以尝试什么？有没有办法在公共私人路线中使用render={()=><Controls/>} 之类的东西？

【问题讨论】：

正如我所写，我已经尝试通过 {pure: false} 进行连接，并且还使用路由器
你需要提供更多的代码，也许你可以在codesandbox上设置例子？
是的，完成codesandbox.io/s/yjl2j4ko9
但它不能编译。
但我有个主意。尝试将{ pure: false } 放在应用程序中所有可能的connect 上（记住这是第四个参数）。只是为了让它不相关。

标签： reactjs react-router react-redux material-ui

【解决方案1】：

您已经在 AppRouter 中复制了您的路由器上下文，这应该是：

const AppRouter = () => (
  <div>
    <PublicRoute path="/" component={LoginPage} exact={true} />
    <PrivateRoute path="/Buckets" component={BucketsPage} />
    <PrivateRoute path="/Payments" component={PaymentsPage} />
  </div>
);

你已经在 index.js 中配置了 react-router：

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,

  document.getElementById("root")
);

因此，除非需要，否则您可以删除 { pure: false } 和其他不必要的 withRouter hoc。

【讨论】：