리액트 라우터 v4에서 버튼 클릭을 통해 경로를 탐색하는 방법

리액트 라우터 v4에서 버튼 클릭을 통해 경로를 탐색하는 방법

리액트-라우터-돔에는 다음과 같은 경로가 있습니다.

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

내가 어떻게 그럴 수 있을까?

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

이 버튼을 탐색에만 사용하는 경우 다음 항목으로 대체할 수 있습니다.<Link />¹ 버튼 스타일을 적용합니다.

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

또는 를 사용할 수 있습니다.<NavLink />를 클릭합니다².

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

react-router-dom라는 이름의 후크를 내보냅니다.useHistory. Import하여 컴포넌트에서 다음과 같이 사용합니다.

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

사용하고 있는 것:

• "filename" : "^16.13.1"
• "flash-dom" : "^5.2.0"

상세한 것에 대하여는, 다음의 투고를 참조해 주세요.https://ultimatecourses.com/blog/programmatically-navigate-react-router

react-router-dom 버전 6에서 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>요소

react-router-dom 버전6 에서는 Link 컴포넌트도 사용할 수 있습니다.이것은 @Abey Bruck의 답변을 되돌리기 위한 것입니다.

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

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

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

언급URL : https://stackoverflow.com/questions/44877821/how-to-navigate-on-path-by-button-click-in-react-router-v4