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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (245)

我有像这样结构的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;

正如您在代码中看到的那样,如果未经过身份验证,我想重定向到服务器页面。该页面是管理用户注册的另一个响应应用程序,位于服务器中但位于另一个路由树中:/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" )
        )}
    />);
用户回答回答于

我有一个带反应路由器的create-react-app项目,以及当输入路径'/ path / *'时它就像在同一个反应路由器中一样加载的问题,即使我有配置使用另一个反应项目快递服务器。问题是服务工作者在后台运行,而'/'内的任何路由都使用缓存。 我的解决方案是修改'registerServiceWorker.js',这样当你在路径中时,你忽略了服务工作者。我没有深入了解服务工作者,但这里是我使用的代码:

export default function register() {
    ...
    window.addEventListener('load', () => {
        const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
        if(window.location.href.match(/*\/path\/*/)){
           // Reload the page and unregister if in path
           navigator.serviceWorker.ready.then(registration => {
              registration.unregister().then(() => {
                  window.location.reload();
              });
           });
        } else if (isLocalhost) {
    ...

在进入路径时,它取消订阅服务器并重新加载页面。

扫码关注云+社区

领取腾讯云代金券