web-dev-qa-db-ja.com

React Router v4でボタンをクリックしてパスをナビゲートする方法は？

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>

どうやってやるの？

javascriptreactjsreact-router-v4react-router-dom
13
i am gpbaculio
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);
22
soywod

ナビゲーションのみにボタンを使用している場合は、<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";

9
frogatto