React 12

리액트 router 렌더링 & togethersports(포폴) 시작

ReactRouter

React앱에서 라우팅 기능을 지원하는 패키지

npm install react-router
npm install react-router-dom@5 , @6<- 5버전, 6버전

<Swtich>
	<Route path ="/hello" exact>
</Swtich>

리액트라우터는 그저 라우터를 위에서 아래로 통과한다, 일치하는 항목을 찾는다는것은 전체경로가 아니라 경로의 시작부분과 일치할때를 의미한다.
switch : 일치하는 항목 찾으면 스위치로 인해 중단 다른거부터 확인안하고 일치하는 항목을 찾은 하나의 데이터 렌더링
exact : 정확히 일치하는 경우에만 일치여부를 알려준다
중첩라우터 : 한곳에서만 라우터를 정의하는것이 아니라 원하는곳 어디에서나 라우터를 정의 할수있다, 그리고 현재 활성화된 컴포넌트에 있는 경우라면 react-router-dom에 의해 평가된다. 다른 컴포넌트에서 라우터를 정의 할 수 있음으로 다른 라우터에서도 정의 할 수 있다.
Redirect : 리다이렉션한다.

라우팅

여러 페이지를 추가하는 방법, 또는 동일한 단일 페이지 응용 프로그램에
URL이 다른 여러 페이지가 있는것처럼 보이게 하는 방법
라우팅 기능을 사용하려면 BrowserRouter 컴포넌트를 최상위 태그에 감싸주면 된다.

//App.js
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Header from './pages/Header';
 import Home from './pages/Home';
 import Board from './pagres/Board';
 const App = () => {
    return (
        <BrowserRouter>
            <div className="App">
                <Header />
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/board" element={<Board />} />
                </Routes>
            </div>
        </BrowserRouter>
    );
}

BrowserRouter : 브라우저 History API를 사용해 현재 위치의 URL을 저장해주는 역할이다.
Routes : 자식 route들을 구성하고 있는 단위이다.
Route : path를 통해 URL을 분기시킬 수 있다. 중첩해서 사용할 수 있다. (중첩 라우팅)

링크이동

페이지를 갱신하지 않고 렌더링 방식으로 이동하려면 Link 컴포넌트를 사용하면된다.
HTML 앵커 태그로 자동으로 변환해준다.

import { Link } from 'react-router-dom';
const Nav = () => {
    return (
        <div>
            <Link to={'/'}>Home</Link>
            <Link to={'/board'}>Board</Link>
        </div>
    );
}
export default Nav;

useParams

import { useParams } from 'react-router-dom';
const ProductDetail = () => {
	const params = useParams();
	return(
		<section>
			<h1>Product Detail</h1>
			<p>{params.productId}</p>
		</section>
	);
};
export default ProductDetail;

useHistory()

브라우저기록을 변경할수있다, replace : 리디섹션, push : 새페이지에추가

const addNameHandler = (props) => {
    history.push('/name');
  };

prompt

우리가 다른곳으로 이동할 때 자동으로 감시한다, 특정조건이 충족되면 떠나기전에 경고를 표시한다. useState이용해서 사용 react-router-dom

	<Prompt 
        when={isEntering} 
        message={(location) => 
        'leave?'
        }
     />

쿼리 매개변수

넌 또 무슨에러냐..

return(
	<div>/<div>
)

return
	<div></div>    으로 바꾸니까 해결됨
  
return (
    <div>
      {function()}
    </div>
)                  으로 바꾸니까 해결됨

참조