1） 反应路由器> V6 钩子：useNavigate

如果你有功能组件，你可以使用react-router的钩子。React >= 16.8useNavigate

import React from 'react';
import { useNavigate } from "react-router-dom";

const YourComponent = () => {
    const navigate = useNavigate();

    const handleClick = () => {
        navigate("/path/to/push");
    }

    return (
        <div>
            <button onClick={handleClick} type="button" />
        </div>
    );
}

export default YourComponent;

2） 反应路由器> V5 钩子：useHistory

如果你有功能组件，你可以使用react-router的钩子。react-router v5useHistory

import React from 'react';
import { useHistory } from 'react-router-dom';

const YourComponent = () => {
    const history = useHistory();

    const handleClick = () => {
        history.push("/path/to/push");
    }

    return (
        <div>
            <button onClick={handleClick} type="button" />
        </div>
    );
}

export default YourComponent;

3） 反应路由器> V4 HOC：withRouter

正如@ambar评论中提到的，React-router自V4以来已经改变了其代码库。以下是 withRouter 的文档

import React, { Component } from 'react';
import { withRouter } from "react-router-dom";

class YourComponent extends Component {
    handleClick = () => {
        this.props.history.push("path/to/push");
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick} type="button">
            </div>
        );
    };
}

export default withRouter(YourComponent);

4） React 路由器 < V4 与browserHistory

您可以使用 react-router 实现此功能。代码如下：BrowserHistory

import React, { Component } from 'react';
import { browserHistory } from 'react-router-dom';

export default class YourComponent extends Component {
    handleClick = () => {
        browserHistory.push('/login');
    };

    render() {
        return (
            <div>
                <button onClick={this.handleClick} type="button">
            </div>
        );
    };
}

5） Reduxconnected-react-router

如果你已经用redux连接了你的组件，并且已经配置了connected-react-router，你所要做的就是，也就是说，你不需要HOC来注入到组件属性中。this.props.history.push("/new/url");withRouterhistory

// reducers.js
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';

export default (history) => combineReducers({
    router: connectRouter(history),
    ... // rest of your reducers
});


// configureStore.js
import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import createRootReducer from './reducers';
...
export const history = createBrowserHistory();

export default function configureStore(preloadedState) {
    const store = createStore(
        createRootReducer(history), // root reducer with router state
        preloadedState,
        compose(
            applyMiddleware(
                routerMiddleware(history), // for dispatching history actions
                // ... other middlewares ...
            ),
        ),
    );

    return store;
}


// set up other redux requirements like for eg. in index.js
import { Provider } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router';
import configureStore, { history } from './configureStore';
...
const store = configureStore(/* provide initial state if any */)

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <> { /* your usual react-router v4/v5 routing */ }
                <Switch>
                    <Route exact path="/yourPath" component={YourComponent} />
                </Switch>
            </>
        </ConnectedRouter>
    </Provider>,
    document.getElementById('root')
);


// YourComponent.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
...

class YourComponent extends Component {
    handleClick = () => {
        this.props.history.push("path/to/push");
    }

    render() {
        return (
          <div>
            <button onClick={this.handleClick} type="button">
          </div>
        );
      }
    };

}

export default connect(mapStateToProps = {}, mapDispatchToProps = {})(YourComponent);

对于简单的答案，可以使用 中的组件，而不是 。有办法在JS中更改路由，但似乎你在这里不需要它。Linkreact-routerbutton

<span className="input-group-btn">
  <Link to="/login" />Click to login</Link>
</span>

要在 1.0.x 中以编程方式执行此操作，请在 clickHandler 函数中执行以下操作：

this.history.pushState(null, 'login');

取自升级文档 这里

您应该已将 放置 在路由处理程序组件上。如果它是定义中提到的子组件，则可能需要进一步向下传递this.historyreact-routerroutes