Question

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

我在appRouter里面有一个来自material-ui css lib（一个管理控制面板）的抽屉。我使用<Link>导航部分，但在集成redux和public / privare路径<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/>}之类的东西吗？

Answer 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个。

在私有/公共路由和redux集成之后，<link />不会重新呈现组件

1 个答案: