使用 React Router V4 重定向到 ReactJS 组件上的服务器路由

Mendes 发表于 Dev

门德斯

我的 React Router V4 路由是这样构建的：

const isAuthenticated = () => {
    let hasToken = localStorage.getItem("jwtToken");
    if (hasToken) return true;
    return false;
};

const AuthenticatedRoute = ({ component: Component, ...rest }) =>
    <Route
        {...rest}
        render={props =>
            isAuthenticated()
                ? <Component {...props} />
                : <I NEED TO REDIRECT FROM HERE TO SERVER PAGE />}
    />;

class App extends Component {
    render() {
        return (
            <BrowserRouter basename="/editor">
                <Switch>
                    <AuthenticatedRoute exact path="/" component={AppNav} />
                    <AuthenticatedRoute
                        exact
                        path="/:module"
                        component={AppNav}
                    />
                    <AuthenticatedRoute
                        exact
                        path="/:module/:screen"
                        component={AppNav}
                    />
                    <AuthenticatedRoute
                        exact
                        path="/:module/:screen/:action"
                        component={AppNav}
                    />
                    <AuthenticatedRoute
                        exact
                        path="/:module/:screen/:action/:id"
                        component={AppNav}
                    />

                    <Route component={PageNotFoundError} />
                </Switch>
            </BrowserRouter>
        );
    }
}

export default App;

正如您在代码中看到的，如果未通过身份验证，我想重定向到服务器页面。该页面是另一个管理用户注册的 React 应用程序，位于服务器中，但位于另一个路由树中：/registration

我尝试过但没有成功：

<Redirect to="//registration' />
windows.location = "/registration"
windows.location.href = "/registration"
<Redirect to="http//registration' />
windows.location = "http://registration"
windows.location.href = "http://registration"

所有重定向到当前应用程序中的页面。

对此的解决方案是什么？

阿姆阿里

我是这样实现的：

const AuthenticatedRoute = ({ component: Component, ...rest }) =>
    (<Route
        {...rest}
        render={props =>(
            isAuthenticated()
                ? (<Component {...props} />)
                : ( window.location = "http://your_full_url" )
        )}
    />);

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。