在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' }}
           />
       )
     }
   />

這是一個有效的例子