考虑到您使用的是react-router v4
将组件与withRouter一起使用，并使用来自props的history.push来更改路由。只有当组件不接收Router props时，才需要使用withRouter，当您的组件是路由器呈现的组件的嵌套子组件，并且您尚未“t将路由器属性传递给它，或者当组件根本没有链接到路由器，并且呈现为与路由器分离的组件时。

import {withRouter} from 'react-router';

class App extends React.Component {
     ...
     componenDidMount() {
        // get isLoggedIn from localStorage or API call
        if (isLoggedIn) {
             // dispatch an action to change the route
             this.props.history.push('/home');
        }
     }
     render() {
         // return login component
         return <Login />
    }
}

export default withRouter(App);

重要说明

如果您使用withRouter来防止shouldComponentUpdate封锁更新，则withRouter必须 Package 实作shouldComponentUpdate的元件。例如，使用Redux时：
//这会得到shouldComponentUpdate左右的值

withRouter(connect(...)(MyComponent))

//这不

connect(...)(withRouter(MyComponent))

或者您可以使用重定向

import {withRouter} from 'react-router';

class App extends React.Component {
     ...
     render() {
         if(isLoggedIn) {
              return <Redirect to="/home"/>
         }
         // return login component
         return <Login />
    }
}

通过react-router v2 or react-router v3，您可以使用context动态更改路由，如下所示

class App extends React.Component {
     ...
     render() {
         if (isLoggedIn) {
             // dispatch an action to change the route
             this.context.router.push('/home');
         }
         // return login component
         return <Login />
    }
}

App.contextTypes = {
    router: React.PropTypes.object.isRequired
}
export default App;

或使用

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

在React路由器版本4中：

import React from 'react'
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom'

const Example = () => (

  if (isLoggedIn) {
    <OtherComponent />

  } else {

    <Router>
      <Redirect push to="/login" />
      <Route path="/login" component={Login}/>
    </Router>

  }
)

const Login = () => (
    <h1>Form Components</h1>
    ...
)

export default Example;

另一种选择是使用Thunk风格的异步操作（这是安全的/允许有副作用）来处理这个问题。
如果您使用Thunk，则可以使用thunk.withExtraArgument将相同的history对象注入到<Router>组件和Thunk操作中，如下所示：

import React from 'react'
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom'
import { createBrowserHistory } from "history"
import { applyMiddleware, createStore } from "redux"
import thunk from "redux-thunk"

const history = createBrowserHistory()

const middlewares = applyMiddleware(thunk.withExtraArgument({history}))
const store = createStore(appReducer, middlewares)

render(
  <Provider store={store}
    <Router history={history}>
      <Route path="*" component={CatchAll} />
    </Router
  </Provider>,
appDiv)

然后在动作创建器中，您将拥有一个可以安全地与ReactRouter一起使用的history示例，因此如果您没有登录，您可以只触发一个常规Redux事件：

// meanwhile... in action-creators.js
export const notLoggedIn = () => {
  return (dispatch, getState, {history}) => {
    history.push(`/login`)
  }
}

这样做的另一个好处是URL更容易处理，所以我们可以把重定向信息放在查询字符串上，等等。
您还可以尝试在Render方法中执行此检查，但如果它导致问题，您可能会考虑在componentDidMount中或生命周期的其他地方执行此检查（尽管我也理解坚持使用无状态功能能力的愿望！）
您仍然可以使用Redux和mapDispatchToProps将操作创建器注入到组件中，因此您的组件仍然只是松散地连接到Redux。

这是我的代号
如果用户已登录，则允许PrivateRoute输入path，并将令牌保存到localStorge

function PrivateRoute({ component: Component, ...rest }) {
     return (
        <Route
          {...rest}
          render={props => (localStorage.token) ? <Component {...props} /> : (
            <Redirect
              to={{
                pathname: '/signin',
                state: { from: props.location },
              }}
            />
          )
          }
        />
      );
    }

在此处定义应用程序中的所有路径

export default (
  <main>
    <Switch>
      <Route exact path="/signin" component={SignIn} />
      <Route exact path="/signup" component={SignUp} />
      <PrivateRoute path="/" component={Home} />
    </Switch>
  </main>
);

那些在react-router v4上实施此功能时遇到问题的人。下面是一个通过react应用程序编程导航的工作解决方案。
history.js

import createHistory from 'history/createBrowserHistory'

export default createHistory()

App.js或Route. jsx。将历史记录作为属性传递给路由器。

import { Router, Route } from 'react-router-dom'
import history from './history'
...
<Router history={history}>
 <Route path="/test" component={Test}/>
</Router>

您可以使用push()进行导航。

import history from './history' 

...

render() {
     if (isLoggedIn) {
         history.push('/test') // this should change the url and re-render Test component
     }
     // return login component
     <Login />
}

这一切都要归功于这条评论：https://github.com/ReactTraining/react-router/issues/3498#issuecomment-301057248

render(){ 

    return (
        <div>  
            { this.props.redirect ? <Redirect to="/" /> :'' } 
            <div>
                add here component codes
            </div>
        </div>
    );
}

我建议您使用connected-react-routerhttps://github.com/supasate/connected-react-router，它可以帮助您执行导航，如果您愿意，甚至可以从reducer/actions执行导航。它有很好的文档记录，易于配置

我能够在无状态功能组件中使用history，使用withRouter的方式如下（需要忽略typescript警告）：

import { withRouter } from 'react-router-dom';

...

type Props = { myProp: boolean };

// @ts-ignore
export const MyComponent: FC<Props> = withRouter(({ myProp, history }) => {

...

})

import { useNavigate } from "react-router-dom"; //with v6

export default function Component() {
  const navigate = useNavigate();
  navigate.push('/path');
}

我遇到了这个问题，并且用react-router-dom版本6中的新useNavigate钩子解决了这个问题