React - 라우팅 , dynamic routing

- SPA 라우팅 과정

1) 브라우저에서 최초에 '/' 경로로 요청을 하면,

2) react web app 을 내려줌

3) 내려받은 react app에서 '/'경로에 맞는 컴포넌트를 보여줌

4) react app에서 다른페이지로 이동하는 동작을 수행하면

 5) 새로운 경로에 맞는 컴포넌트를 보여줌

 

npm i react-router-dom : 가장 대표적인 라우팅 패키지

 

ex) 실습

 - about, profile, home component 생성

 - 각자 경로 지정(home - '/' , profile - '/profile' , about - '/about'

- browserrouter로 라우터들을 감싸줌

- 브라우저에서 요청한 경로에 route의 path가 들어있으면 해당 컴포넌트를 보여줌

-> '/about'에 home, about 이 다 포함되어 있기 때문에 둘다 보여줌

import './App.css';
import { BrowserRouter, Route } from 'react-router-dom';
import Home from "./pages/Home"
import Profile from './pages/Profile';
import About from './pages/About';

function App() {
  return (
    //react router dom에서 가져온 컴포넌트 사용
    <BrowserRouter>
    <Route path="/" component={Home}></Route>
    <Route path="/profile" component={Profile}></Route>
    <Route path="/about" component={About}></Route>
    </BrowserRouter>
  );
}

export default App;

-> exact를 붙여주면 그것만 나오게 할 수 있음

<BrowserRouter>
      <Route path="/" exact component={Home}></Route>
      <Route path="/profile" exact component={Profile}></Route>
      <Route path="/about" exact component={About}></Route>
</BrowserRouter>

 

---------------------------------09.25 -------------------------------

 

- Dynamic routing

 : 위의 과정들은 고정적이었지만 동적으로 라우팅을 처리해야 할 때가 있음

ex)http://localhost:3000/about/id=?

  -> id값과 같이 특정 값을 전달받아 처리해야 할 수도 있음

 

-  dynamic routing (1)  

- app.js

import './App.css';
import { BrowserRouter, Route } from 'react-router-dom';
import Home from "./pages/Home"
import Profile from './pages/Profile';
import About from './pages/About';

function App() {
  return (
    //react router dom에서 가져온 컴포넌트 사용
    <BrowserRouter>
      <Route path="/" exact component={Home}></Route>
      <Route path="/profile" exact component={Profile}></Route>
      <Route path="/profile/:id" exact component={Profile}></Route>
      <Route path="/about" exact component={About}></Route>
    </BrowserRouter>
  );
}

export default App;

 

- profile.jsx

export default function Profile(props){
    const id = props.match.params.id;
    console.log(id, typeof id);
    return (
        <div>
            <h2>Profile page</h2>
            {id && <p> id는 {id} 입니다.</p>}           
        </div>
    );
}

- http://localhost:3000/profile/1

result

 

-  dynamic routing (2)  

 

- 내장된 브라우저 객체 - URLSearchParams 사용

 

export default function About(props){
    const searchParams = props.location.search;
    console.log(searchParams);
    //내장된 브라우저 객체 - urlsearchparams 사용
    const obj = new URLSearchParams(searchParams);
    console.log(obj.get('name'));
    return <div>About page</div>;
}

 * 브라우저 지원 유무에 따라 사용이 불가할 수도 있음

  -> npm i query-string-S 로 설치해서 해결가능

import queryString from 'query-string';
export default function About(props){
    const searchParams = props.location.search;
    console.log(searchParams);
    //내장된 브라우저 객체 - urlsearchparams 사용
    //const obj = new URLSearchParams(searchParams);
    //console.log(obj.get('name'));

    const query = queryString.parse(searchParams);
    console.log(query);
    return <div>About page</div>;
}

 

- http://localhost:3000/about?name=mark

result2