反应路由器私有路由/重定向不起作用 [英] React router private routes / redirect not working

问题描述

我稍微调整了私有路由的 React Router 示例，以便与 Redux 配合使用，但在链接或重定向到其他页面"时没有呈现任何组件.该示例可以在这里找到:

https://reacttraining.com/react-router/web/example/身份验证工作流程

他们的 PrivateRoute 组件如下所示:

const PrivateRoute = ({ component: Component, ...rest }) =>(<Route {...rest} render={props =>(fakeAuth.isAuthenticated ?(<组件{...props}/>) : (<重定向到={{路径名:'/登录'，状态:{来自:props.location}}}/>))}/>)

但是，因为我已经将它合并到一个 Redux 应用程序中，所以我不得不稍微调整 PrivateRoute 以便我可以访问 redux store 以及 route Props:

const PrivateRouteComponent = (props) =>(<Route {...props.routeProps} render={() =>(props.logged_in ?(<div>{props.children}</div>) : (<重定向到={{路径名:'/登录'，状态:{来自:props.location}}}/>))}/>);const mapStateToProps = (state, ownProps) =>{返回 {登录:state.auth.logged_in，位置:ownProps.path，路线道具:{精确: ownProps.exact，路径: ownProps.path}};};const PrivateRoute = connect(mapStateToProps, null)(PrivateRouteComponent);导出默认 PrivateRoute

每当我未登录并点击 PrivateRoute 时，我都会正确重定向到/login.但是，例如在登录并使用 或单击任何 到 PrivateRoute 之后，URI 更新，但视图没有.它停留在同一个组件上.

我做错了什么?

<小时>

为了补全图，app的index.js里面有一些不相关的东西，路由是这样设置的:

ReactDOM.render(<提供者商店={商店}><应用程序><路由器><div><PrivateRoute 精确路径="/"><Home/></PrivateRoute>//... 其他私有路由<Route path="/login" component={Login}/>

</路由器></应用程序></提供者>,document.getElementById('root'));

解决方案

你需要用标签包裹你的Route

ReactDOM.render(<提供者商店={商店}><应用程序><路由器><div><开关><PrivateRoute 精确路径="/"><Home/></PrivateRoute>//... 其他私有路由<Route path="/login" component={Login}/></开关>

</路由器></应用程序></提供者>,document.getElementById('root'));

I have slightly adjusted the React Router example for the private routes to play nice with Redux, but no components are rendered when Linking or Redirecting to other 'pages'. The example can be found here:

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

Their PrivateRoute component looks like this:

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

But, because I have incorporated it in a Redux application, I had to adjust the PrivateRoute a little so I can access the redux store, as well as the route 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

Whenever I'm not logged in and hit a PrivateRoute, I'm correctly redirected to /login. However, after for instance logging in and using a <Redirect .../>, or clicking any <Link ...> to a PrivateRoute, the URI updates, but the view doesn't. It stays on the same component.

What am I doing wrong?

---

Just to complete the picture, in the app's index.js there is some irrelevant stuff, and the routes are set up like this:

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')
);

解决方案

You need to wrap your Route with <Switch> tag

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'));

这篇关于反应路由器私有路由/重定向不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！