在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内，没有任何东西会脱离基本名称。

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

Answer 1

您需要在应用程序中安装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;

Answer 2

您应该使用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' }}
           />
       )
     }
   />

这是一个有效的例子