라우팅 처리하는법

route 사용법

두가지 방식이 있고 결과는 똑같다.

<Route path="/detail" exact component={Detail}/>

<Route path="/detail" exact>
  <Detail/>
</Route>

파라미터 주는법

// 파라미터 주기
<Route path="/cat/:cat_name" component={Cat}/>

파라미터 사용방법
useParams 훅을 사용해서 이동하기

import React from "react";
import { useParams } from "react-router-dom";
const Cat = (props) => {
    const cat_name = useParams();
    console.log(cat_name);
    // console.log(props);
  return (
      <div>고양이 화면입니다!</div>
  );
};
export default Cat;

Link 사용 방법

<Link to="주소">[텍스트]</Link>

Link 컴포넌트를 클릭하지 않고 페이지를 전환하는 방법
useHistory 훅을 사용해서 이동하기
1.임포트 : import { useHistory } from "react-router-dom";
2.객체에 담기 : const history=useHistory();
3.이벤트 함수에 함수 넣기 :<button onClick={() => {history.push("/cat");}}>

import React from "react";
 import { useHistory } from "react-router-dom";
	const Home = (props) => {
 	const history = useHistory();
	return (
    <>
      <div>메인 화면이에요.</div>
      <button
        onClick={() => {
          history.push("/cat");
        }}

        cat으로 가기
      </button>
    </>
  );
};
export default Home;

index.js 모습

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom";
	const root = ReactDOM.createRoot(document.getElementById('root'));
	root.render(
 	 <BrowserRouter>
   	   <App />
 	 </BrowserRouter>
);

exact로 중복 주소를 처리
Switch로 잘못된 주소처리하는 법
1.일단 NotFound.js 파일을 만들고 빈 컴포넌트를 만들어주세요.

import React from "react";
const NotFound = (props) => {
  return <h1>주소가 올바르지 않아요!</h1>;
};
export default NotFound;

2.App.js에서 불러옵니다.(임포트)
3.Switch로 감싸줍니다.
4.NotFound컴포넌트를 Route에 주소 없이 연결하면 끝!

		<Switch>
            <Route
              path="/"
              exact
              render={(props) => (
                <BucketList
                  list={this.state.list}
                  history={this.props.history}
                />
              )}
            />
            <Route path="/detail" component={Detail} />
            <Route component={NotFound} />
          </Switch>

Switch의 기능
감싼 Route들 중 맨 위에서부터 내려오면서 매칭되는 주소가 있다면 그걸 렌더링해주고 멈춥니다. 하지만 마지막까지 맞는 주소가 없다면 주소를 배정안하고 마지막에 놓은 NotFound페이지가 띄워지게 됩니다.
Switch로 감싸지 않는다면 모든페이지에서 NotFound컴포넌트에 있는 내용도 같이 뜨게됩니다.