TIL - 리액트 라우터
온천
'클래식' 웹사이트: 일반적으로 서버에서 완전히 하나씩 로드되는 경로가 다른 여러 페이지입니다.
React: 단일 페이지 애플리케이션(SPA):
SPA에서 HTML 문서는 애플리케이션이 열릴 때만 로드되며 평생 동안 동일하게 유지됩니다. HTML 문서는 "비어 있습니다".
<body>에는 애플리케이션을 로드하는 <script> 태그와 애플리케이션에서 생성한 DOM을 포함하기 위한 하나의 빈 태그가 포함되어 있습니다. 방문한 각 페이지의 콘텐츠는 전적으로 React를 통해 브라우저 내부에 구축됩니다.따라서 내비게이션 시스템은 자연스럽지 않습니다. 우리는 무엇을 표시할지 결정하기 위해 React Router를 사용합니다. 이 방법으로 우리는 할 수 있습니다
1. 리액트 라우터를 설치합니다.
2. 부모 구성 요소(index.js)를 <BrowserRouter />로 래핑합니다.
import { BrowserRouter } from 'react-router-dom';
<BrowserRouter>
<App />
</BrowserRouter>
3. 메인 <App> 컴포넌트에서 다른 Route를 생성합니다.
import { Switch, Route } from 'react-router-dom';
<Switch>
<Route exact path='/' component={Home} />
<Route path='/users' component={Users} />
<Route path='/contact' component={Contact} />
</Switch>
라우팅은 현재 경로(예:/users)와 표시할 구성요소(예: 사용자) 간의 대응 관계를 설정하는 것을 말합니다.
스위치에 포함된 경로 중 하나만 주어진 시간에 활성화될 수 있습니다.
4. <링크>를 사용하여 구성 요소 간 탐색
import { Link } from 'react-router-dom';
<ul className='Header'>
<li><Link to='/'>Home</Link></li>
<li><Link to='/users'>Users</Link></li>
<li><Link to='/contact'>Contact</Link></li>
</ul>
DOM에서
<Link to="...">는 <a href="..."> 요소를 출력으로 생성합니다.내비링크
<Navlink>
import { NavLink } from 'react-router-dom';
<ul className='Header'>
<li>
<NavLink activeClassName='active' exact to='/'>Home</NavLink>
</li>
<li>
<NavLink activeClassName='active' to='/users'>Users</NavLink>
</li>
<li>
<NavLink activeClassName='active' to='/contact'>Contact</NavLink>
</li>
</ul>
Router in depth
렌더 소품
<Route path="/contact"
render={ props => (
<Contact tabs= {"valuePassed"} {...props} />
)}
/>
Reference
이 문제에 관하여(TIL - 리액트 라우터), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/annequinkenstein/til-react-router-21cn텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
