如何通过单击反应路由器 v4 中的按钮在路径上导航？

Question

我在 react-router-dom 中有这条路径：

  <BrowserRouter>
  <div>
  <Route exact path='/(index.html)?' component={Home}/> {/* app = home */}
  <Route  path='/register' component={Registration}/>
  </div>
</BrowserRouter>

一切正常，现在在我的组件中的任何地方我想通过 onClick 更改路径，代码如下：

 <button onClick={() => history.push('/the/path') }> change path </button>

我怎样才能做到这一点？

原文由 gpbaculio 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

class App extends React.Component {
  ...

  nextPath(path) {
    this.props.history.push(path);
  }

  render() {
    return (
      <button onClick={() => this.nextPath('/the/path') }>
        change path
      </button>
    );
  }
}

export default withRouter(App);

原文由 soywod 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您仅将按钮用于导航，则可以将其替换为 <Link /> 1并应用按钮样式。

 <Link to='/new/location/'>Click Me</Link>

或者您可以使用 <NavLink /> 2 。

在使用 Material UI 的情况下，您可以使用以下代码：

 import { Link } from 'react-router-dom'
import Button from '@material-ui/core/Button';

<Button component={Link} to="/new/location/">
  Click Me
</Button>

---

(1): import {Link} from "react-router-dom";

(2): import {NavLink} from "react-router-dom";

原文由 frogatto 发布，翻译遵循 CC BY-SA 4.0 许可协议