在 React Router V4 中，如何导航到定义的基本名称之外的页面？

Question

考虑以下 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} />
                : window.location = "/auth/login" } <<-- ERROR HERE
    />;

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

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

export default App;

auth/login 是另一个需要从服务器加载的 ReactJs 应用程序，或者换句话说，auth/login 需要绕过客户端路由并发送到服务器，它将被路由并服务于一个新的 ReactJS 应用程序（ auth 应用程序与 login 页面）。

尝试重定向（未通过身份验证）时，我在浏览器控制台上收到以下错误：

You are attempting to use a basename on a page whose URL path does not begin with a basename. 
Expected path "/login" to begin with "/editor"

看起来我被“困”在 React Router V4 中，没有什么可以脱离基本名称。

我该如何解决这个问题并重定向到服务器页面，退出或绕过反应路由器本身？

Answer 1

你应该使用react-router-dom提供的Redirect组件

import { Redirect, Route } from 'react-router-dom';
const AuthenticatedRoute = ({ component: Component, ...rest }) =>
  <Route
    {...rest}
    render={props =>
      isAuthenticated()? <Component {...props} />
       : (
          <Redirect
            to={{ pathname: 'auth/login' }}
           />
       )
     }
   />

这是一个有效的example

Answer 2

你需要在你的应用中安装 react-router-dom

yarn add react-router-dom

或

npm i -S react-router-dom

然后导入这个

import { BrowserRouter as Router } from 'react-router-dom';

你要重定向的地方

browserHistory.push('/path/some/where');

你的代码应该是

import { BrowserRouter as Router } from 'react-router-dom';

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

    const AuthenticatedRoute = ({ component: Component, ...rest, history }) =>
        <Route
            {...rest}
            render={props =>
                isAuthenticated()
                    ? <Component {...props} />
                    : history.push("/auth/login")}
        />;
class App extends Component {
    render() {
        return (
            <BrowserRouter basename="/editor">
                <Switch>
                    <AuthenticatedRoute exact path="/" component={AppHome} />
                    <AuthenticatedRoute
                        exact
                        path="/:module"
                        component={AppNav}
                    />

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

export default App;