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

Question

Consider the following React Router V4 code:

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 is another ReactJs application that needs to be loaded from the server, or in other words, auth/login needs to bypass client routing and sent to server, where it will be routed and will serve a new ReactJS application ( auth application with login page).

When trying to redirect (not authenticated) I´m getting the following error on browser console:

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"

Looks like I´m "trapped" inside React Router V4 and nothing can get out of the basename.

How can I solve that and redirect to a server page, quitting or bypassing the react router itself ?

Answer 1

You need to install react-router-dom in your app

yarn add react-router-dom

or

npm i -S react-router-dom

And import this

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

Where you want to redirect

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

your code should be

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

You should use the Redirect component provided by react-router-dom

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

Here is a working example