webentwicklung-frage-antwort-db.com.de

Wie navigiert man auf dem Pfad per Knopfdruck in React Router V4?

Ich habe diese Pfade in React-Router-Dom:

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

alles funktioniert einwandfrei, jetzt möchte ich irgendwo in meinen Komponenten den Pfad mit onClick ändern, einen Code wie diesen:

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

wie kann ich das machen?

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

Wenn Sie die Schaltfläche nur zur Navigation verwenden, können Sie sie durch <Link /> Ersetzen.1 und wenden Sie einen Schaltflächenstil an.

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

Oder Sie können den <NavLink />2.

Wenn Sie Material UI verwenden, können Sie den folgenden Code verwenden:

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