[상세] App.tsx

//App.tsx


import React, { useState } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import Footer from "./layout/Footer";
import Header from "./layout/Header";
import DeliveryList from "./pages/DeliveryList";


function App() {
  return (
    <React.Fragment>
      <Header />
      <div className="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
        <aside className="bd-sidebar"></aside>
        <main className="order-1">
          <BrowserRouter>
            <Routes>
              <Route path="/" element={<DeliveryList />} />
            </Routes>
          </BrowserRouter>
        </main>
      </div>
      <Footer />
    </React.Fragment>
  );
}

export default App;

BrowserRouter 적용하기

$ yarn add react-router-dom

import { BrowserRouter, Route } from 'react-router-dom';

1. 안에 코드 실행
2. Route의 속성 값으로 해당경로의 url설정 ("/"는 제일 첫번째 경로의 값, 주소에 어떤 값도 가지지 않은 순수한 url이며 맨처음 리액트를 시작했을 때 실행되는 페이지를 나타낸다.)
3. 설정한 path의 경로로 이동했을 때 실행되는 컴포넌트를 설정

URL Parameter 넘기기

Router를 이용해서 전환된 페이지로 데이터를 전달하는 법

1. params로 데이터 넘기기 : params 라는 이름으로 url 뒤에 데이터를 붙여 전달하는 방법

<Route path="/test/:data" element={<Test/>} />

기존에 있던 <Route path="/test" element={} /> 태그의 path 속성 값에 '/:data'를 추가했다.

test.js 수정

/* src/inc/test.js */ 수정 전

import React, { Component } from 'react';

class test extends Component {

  render() {
    return (
        <div>
            <h3> This is test page </h3>
        </div>
    );
  }
}

export default test;

/* src/inc/test.js */ 수정 후

import React, { Component } from 'react';

class test extends Component {
  constructor(props) {
    super(props)
    console.log(props);
  }
  
  render() {
    return (
        <div>
            <h3> My name is {this.props.match.params.data} </h3>
        </div>
    );
  }
}

export default test;

url : localhost:3000/test/hjooliy 로 들어가면,
화면 : My name is hjooliy
-> url의 data 값으로 넘겨진 값을 {this.props.match.params.data} 값으로 가져오고 화면에 렌더된다.

참조