对于简单的答案，您可以使用来自 react-router的 Link组件，而不是 button。在 JS 中有一些方法可以改变路线，但是在这里似乎不需要。

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

要在1.0.x 中以编程方式完成，可以在 clickHandler 函数中这样做:

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

这是从 给你博士的升级版中提取的

您应该将 this.history放置在路由处理程序组件的 react-router上。如果它的子组件位于 routes定义中提到的子组件之下，则可能需要进一步传递该组件

使用 response-Router v2.8.1(可能还有其他2.x.x 版本，但我还没有测试过) ，您可以使用这个实现来执行路由器重定向。

import { Router } from 'react-router';


export default class Foo extends Component {


static get contextTypes() {
return {
router: React.PropTypes.object.isRequired,
};
}


handleClick() {
this.context.router.push('/some-path');
}
}

1)反应路由器 > V6 useNavigate挂钩:

如果你有 React >= 16.8和功能组件，你可以使用 useNavigate 反应路由器挂钩。

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 v5和功能组件，你可以使用 useHistory 反应路由器挂钩。

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)反应路由器 > V4withRouterHOC:

正如@ambar 在评论中提到的，React-router 自 V4以来已经改变了它的代码库

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)使用 browserHistory的 React-Router < V4

你可以使用反应路由器 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)复制版 connected-react-router

如果您已经将组件与 redux 连接，并且已经配置了 连接-反应-路由器，那么您需要做的就是 this.props.history.push("/new/url");即，你不需要 withRouter HOC 注入 history的组件道具。

// 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);

如何使用反应路由器重定向到另一条路由？

例如，当用户单击一个链接时，<Link to="/" />Click to route</Link>反应路由器将查找 /，您可以使用 Redirect to并将用户发送到其他地方，比如登录路由。

从 医生到 反应路由器训练:

呈现 <Redirect>将导航到一个新位置 位置将重写历史堆栈中的当前位置，如 服务器端重定向(HTTP 3xx)。

import { Route, Redirect } from 'react-router'


<Route exact path="/" render={() => (
loggedIn ? (
<Redirect to="/dashboard"/>
) : (
<PublicHomePage/>
)
)}/>

要重定向到的 URL。

<Redirect to="/somewhere/else"/>

要重定向到的位置。

<Redirect to=\{\{
pathname: '/login',
search: '?utm=your+face',
state: { referrer: currentLocation }
}}/>

最简单的解决办法是:

import { Redirect } from 'react-router';


<Redirect to='/componentURL' />

最简单强大的网络解决方案！

"react-router-dom": "^5.1.2"
"react": "^16.10.2"

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




export function HomeSection() {
const history = useHistory();
const goLogin = () => history.push('login');


return (
<Grid>
<Row className="text-center">
<Col md={12} xs={12}>
<div className="input-group">
<span className="input-group-btn">
<button onClick={goLogin} type="button" />
</span>
</div>
</Col>
</Row>
</Grid>
);
}