React-router v4 경로 설정 방법 소결
1.스위치,라 우 터,라 우 트 의 차이
1、Route
Route 는 location 와 ui 의 가장 직접적인 관 계 를 맺 는 것 입 니 다.
2、Router
react-router v4 에서 Router 는 StaticRouter,Memory Router,BrowserRouter,HashRouter,NativeRouter 로 나 뉘 었 다.
Memory Router,BrowserRouter,HashRouter 는
import { Router } from 'react-router'
<!-- -->
<!--history
exports.createBrowserHistory = _createBrowserHistory3.default;
exports.createHashHistory = _createHashHistory3.default;
exports.createMemoryHistory = _createMemoryHistory3.default;
-->
import createBrowserHistory from 'history/createBrowserHistory'
//
const history = createBrowserHistory()
<Router history={history}>
<App/>
</Router>
A
여기에 strict 와 exact 가 추가 되 었 습 니 다.
strict location 이 path 보다 커 야 일치 합 니 다.eq path='/one'location='/one/a'가 일치 합 니 다.
exact location 을 사용 하면 path 와 일치 할 수 있 습 니 다.eq path='/one'location='/one'또는'/one/'가 일치 하기 때문에 약 과 같 습 니 다.
exact 와 strict location=path 를 사용 해 야 일치 합 니 다.
StaticRouter(추가 보충)
3、Switch
이것 은 v4 버 전에 서 새로 추 가 된 것 으로 주로 유일 하 게 일치 하 는 기능 을 하 는 데 쓰 인 다.여러 경로 중 하나 만 일치 하려 는 것 이다.
2.v4 버 전의 경 로 는 어떻게 설정 해 야 합 니까?
1.기본 설정(이것 은 v3 와 기본적으로 일치 하고 효과 도 기본적으로 같다)
일치<=location eq.(/b=>/+/b)(/=>/)
<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
<div>
<Route path="/" component={aContainer} />
<Route path="/b" component={bContainer} />
</div>
</BrowserRouter>일치<=location eq.(/b=>/b)(/=>/)유일 하 게 일치 합 니 다.
<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
<Switch>
// exact， location path='/' 。
<Route exact path="/" component={aContainer} />
<Route path="/b" component={bContainer} />
</Switch>
</BrowserRouter>1.공공 컴 포 넌 트 설정 방법
첫 번 째 방식
<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
<div>
<Route path="/" component={aContainer} />
<Route path="/b" component={bContainer} />
</div>
</BrowserRouter>
<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
<div >
<Route path="/" component={aContainer} />
<Route path="/b" component={Parent} />
{/* {app()} */}
</div>
</BrowserRouter>
const Parent = ({ match }) => (
<div>
<Route path={`${match.url}/`} component={bContainer} />
<Route path={`${match.url}/c`} component={cContainer} />
<Route path={`${match.url}/d`} component={dContainer} />
</div>
);
2.getComponent 를 어떻게 설정 하고 필요 에 따라 불 러 옵 니까?
별 편
3.간단 한 표기 법 이 있 는 지 여부
npm install --save react-router-config
const routes = [
{ component: bContainer,
routes: [
{ path: '/',
exact: true,
component: bContainer
},
{ path: '/b/b',
component: bContainer,
routes: [
{ path: '/b/b/b',
component: bContainer
}
]
}
]
}
]
<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
<div >
{renderRoutes(routes)}
</div>
</BrowserRouter>
<div>
1111
{renderRoutes(this.props.route.routes)}
</div>
이 renderRoutes 는 실제로 한 층 의 Switch 와 여러 개의 Route 로 한 층 을 쌌 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
nginx 에서 사이트 아이콘 표시 설정전단 개발 환경: react：^16.4.1 webpack：^4.16.0 웹 팩 에 favicon. ico 설정 추가: nginx 는 ico 에 대한 지원 을 추가 합 니 다:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
