리액트 라우터

탐색은 단일 페이지 애플리케이션에서 중요합니다. React의 중요한 라이브러리 중 하나는 애플리케이션의 구성 요소 간에 전환할 수 있게 해주는 라우터 라이브러리입니다.

먼저 라우터 돔을 설치해야 합니다.

 npm install react-router-dom@5

그런 다음 BrowserRouter를 index.js로 가져와야 합니다.import { BrowserRouter } from 'react-router-dom';
react router dom에 대한 모듈 오류를 찾을 수 없으면 다음을 설치해야 합니다.npm install react-router-dom --save
그런 다음 BrowserRouter 태그로 루트 구성 요소를 마무리해야 합니다.

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

다음으로 루트 구성 요소에서 다음을 가져옵니다.import { Switch, Route } from "react-router-dom"
그런 다음 return() 다음에 루트 구성 요소를 설정할 수 있습니다.

function App() {

  return (
    <div className="App">
      <NavBar onChangePage={setPage} />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/project">
          <Project />
        </Route>
        <Route path="*">
          <h1>404 not found</h1>
        </Route>
      </Switch>
    </div>
  );
}

정확한 경로의 "정확한"경로는 페이지를 전환하기 위해 경로가 정확히 일치해야 합니다. 홈 "/"부분에만 어떻게 있는지 확인하십시오. <Routh path="*"> 와일드카드 경로입니다.

다음으로 가져오기로 Nav 구성 요소를 설정해야 합니다.import { Link } from "react-router-dom"내부적으로 Link는 "a"앵커 태그 및 onClick 이벤트 리스너와 같은 작업을 수행하여 경로 경로에서 상태 변경을 트리거합니다.

다음도 있습니다.import { NavLink } from "react-router-dom"또한 NavLink를 사용하면 활성화된 경우 링크 변경을 나타내도록 CSS를 설정할 수도 있습니다.

nav a.active {
  background-color: aquamarine;
  color: red;
}

Nav 구성 요소의 반환 설정은 다음과 같습니다.

 return (
        <nav> 
            <NavLink exact to="/">Home </NavLink>
            <NavLink to="/about">About </NavLink>
            <NavLink to="/project">Project </NavLink>
        </nav>
    )

짜잔! 작동하는 내비게이션 바.