Как перемещаться по пути нажатием кнопки в реакции маршрутизатора v4?

Question

У меня есть эти пути в Reaction-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>

Как мне это сделать?

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

Answer 2

Если вы используете кнопку только для навигации, вы можете заменить ее на <Link />¹ и применить стиль кнопки.

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

Или вы можете использовать <NavLink />²

В случае использования пользовательского интерфейса материала вы можете использовать следующий код:

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";

Answer 3

react-router-dom экспортирует крючок, называемый useHistory. Просто импортируйте его и используйте в своем компоненте следующим образом:

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

export default () => {
  const history = useHistory();
   
  return (
    <button onClick={() => history.push('/your/path')}>
      Click me
    </button>
  );
};

Я использую:

• "реагировать": "^ 16.13.1"
• "реакция-маршрутизатор-дом": "^5.2.0"

Подробнее читайте в этом посте: https://ultimatecourses.com/blog/programmatically-navigate-react-router

Answer 4

в версии 6 react-router-dom используйте useNavigate

      import { useNavigate } from "react-router-dom";
import { Button } from "@mui/material";
...
const navigate = useNavigate();
<Button
   onClick={() => navigate("/your-path-here")}>
click me
</Button>

не забудьте установить с mui.com , чтобы использовать <Button></Button>составная часть

Answer 5

в версии 6 react-router-dom вы также можете использовать компонент Link. Это должно поддержать ответ @Abey Bruck

      import { Button } from "@chakra-ui/react";
...

const Home = () => {
  return (
    <Button as={Link} to={'/login'}>Login Page</Button>
  )
}

Answer 6

      import { Button } from "@mui/material";
const navigate = useNavigate();
  const submitHandler = (e) => {
    e.preventDefault();
    navigate(`/`);
  };
<Button variant="contained" onClick={submitHandler}>Home Page</Button>

Answer 7

Ничего особенного, но он выполняет свою работу

 `<a href="http://localhost:3001/contact">  
      {" "}
      Contact Us{" "}
      </a>`