React Routes & Route & Link

Routes

Routes 란 여러개의 route를 담는 태그이다.

 

function App() {

  let [shoes] = useState(data);

  return (
    <div className="App">

		
      <Routes>	// return 속에 Routes태그 를 선언한다.
        <Route></Route>	// 선언된 Routes태그 속에 Route태그를 선언하여 페이지를 나눈다.
        <Route></Route>
      </Routes>

...

 

 

Route

Route란 React router에 가장 중요한 부분으로 URL 세그먼트를 구성 요소, 데이터 로드 및 데이터 변형에 연결한다.

Route는 Router 생성 기능에 전달되는 객체이다.

Route들은 집합들로 인해 복잡한 애플리케이션 레이아웃과 데이터 종속성이 단순해지고 선언적이 된다.

 

<Routes>
  <Route path="/detail" element={<div>detail page</div>} /> // path는 URL경로를 나타낸다.
  <Route path="/about" element={<div>about page</div>} /> // element는 경로의 내용들을 나타낸다.
</Routes>

Route 속성중 path는 URL의 경로를 나타내고 element는 그 경로에 나타나는 화면 구성 요소들을 보여준다.

element 속성속 태그는 하나의 태그로만 구성되어야한다.

 

detail 페이지로 들어갔을때 element속 요소들을 보여준다.

 

 

about 페이지로 들어갔을때 element속 요소들을 보여준다.

 

 

 

반응형

 

 

 

메인페이지를 Route 태그를 사용하여 보여줄 수 있다.

  <Routes>
    <Route path="/" element={	// path가 '/' 인 경우 메인페이지를 보여준다.
    	// fragment문법을 사용하여 하나의 태그로 만든다.
      <>
        <div className='main-bg'></div>

        <div className='container'>
          <div className='row'>
            {
              shoes.map((item, idx) => {
                return (
                  <Item shoes={item} key={idx} idx={idx}></Item>
                )
              })
            }
          </div>
        </div>
      </>
    } />
    <Route path="/detail" element={<div>detail page</div>} />
  </Routes>

메인페이지를 Route태그로 사용할 때 path를 / 로 사용하면 메인페이지를 보여준다.

 

메인페이지와 detail 페이지를 Router를 사용하여 페이지를 나눠서 보여주도록 설정했다.

detail 페이지를 컴포넌트로 만들어서 보여줄 수 있다.

<Route path="/detail" element={<Detail></Detail>} />	// element속에 컴포넌트 태그를 넣는다.

// Detail 컴포넌트 생성
function Detail() {
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width='100%'></img>
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">Product Name</h4>
          <p>Product Desc</p>
          <p>120000</p>
          <button className="btn btn-danger">Order</button>
        </div>
      </div>
    </div>
  )
}

 

 

Link

Link란 웹 브라우저에서 A태그의 작동하는 방식과 유사하게 사용자가 클릭하여 다른 페이지로 이동 할 수 있게 해준다.

Link 는  HTML5 History API를 사용하여 페이지의 새로고침이 없이 브라우저의 주소를 변경하여 보여준다.

 

<Link to="/" >Home</Link>	// to속성에 주소를 설정한다.
<Link to="/detail">Detail</Link>

a태그와 유사하지만 작동 방법이 다르다.