reactjs - React 路由器私有(private)路由/重定向不起作用

Question

我稍微调整了 React Router 示例，使私有(private)路由能够与 Redux 很好地配合，但在链接或重定向到其他“页面”时不会渲染任何组件。该示例可以在这里找到:

https://reacttraining.com/react-router/web/example/auth-workflow

他们的 PrivateRoute 组件如下所示:

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

但是，因为我已将其合并到 Redux 应用程序中，所以我必须稍微调整 PrivateRoute 以便我可以访问 redux 存储以及路由 Props:

const PrivateRouteComponent = (props) => (
    <Route {...props.routeProps} render={() => (
    props.logged_in ? (
        <div>{props.children}</div>
        ) : (
        <Redirect to={{
            pathname: '/login',
            state: { from: props.location }
        }} /> )
    )} />
);

const mapStateToProps = (state, ownProps) => {
    return {
        logged_in: state.auth.logged_in,
        location: ownProps.path,
        routeProps: {
            exact: ownProps.exact,
            path: ownProps.path
        }
    };
};

const PrivateRoute = connect(mapStateToProps, null)(PrivateRouteComponent);
export default PrivateRoute

每当我未登录并点击 PrivateRoute 时，我都会正确重定向到/login。但是，例如登录并使用 <Redirect .../> 后，或点击任意<Link ...>对于 PrivateRoute，URI 会更新，但 View 不会更新。它保留在同一个组件上。

我做错了什么？

<小时/>

只是为了完成图片，在应用程序的 index.js有一些不相关的东西，路由设置如下:

ReactDOM.render(
    <Provider store={store}>
        <App>
            <Router>
                <div>
                    <PrivateRoute exact path="/"><Home /></PrivateRoute>
                    // ... other private routes
                    <Route path="/login" component={Login} />
                </div>
            </Router>
        </App>
    </Provider>,
    document.getElementById('root')
);

Answer 1

您需要包装您的 Route与 <Switch>标签

ReactDOM.render(
<Provider store={store}>
    <App>
        <Router>
            <div>
                <Switch>
                   <PrivateRoute exact path="/"><Home /></PrivateRoute>
                   // ... other private routes
                   <Route path="/login" component={Login} />
                </Switch>
            </div>
        </Router>
    </App>
</Provider>,
document.getElementById('root'));