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

Question

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

我有一个来自 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中尝试了pure：false.js，我可以尝试什么？ 有一种方法可以在公共私人路线中使用类似render={()=><Controls/>}的东西？

Answer 1

您在AppRouter中复制了路由器上下文，该上下文应该很简单：

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

您已经在索引中配置了反应路由器.js：

ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById("root")
);

因此，您可以删除{ pure: false }和其他不必要的withRouterhoc，除非需要它们。