반응 라우터의 기본 사용
1. 첫 번째 단계는 물론 설치입니다.
- npm을 사용하여 설치
npm Install react-router-dom
- 원사를 사용하여 설치
yarn add react-router-dom
2. 두 번째 단계는 가져 오기입니다.
// 有两种url格式: BroswerRouter, 原型为h5的history模式, 路径中不带有`#`
// HashRouter ,使用hash模式, 路径中带有 `#`, 两者比较常用BroswerRouter.
import {
BroswerRouter as Router, Route, Link, NavLink } from 'react-router-dom'
- 팁 : 사용
BroswerRouter경로가보다 간결을보고, 더 URL있다.vue에서router설정,mode: ‘history’같은 (특히 큰 추천!)
3. 세 번째 단계는 사용입니다.
- 라우터, 라우터, 링크 사용 :
import React, {
Component } from 'react';
import {
BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './pages/home';
import About from './pages/about';
import Profile from './pages/profile';
export default class App extends React.Component {
render() {
return (
<BrowserRouter>
<Link to="/">首页</Link>
<Link to="/about">关于</Link>
<Link to="/profile">我的</Link>
// exact为精准配置, 只有路径完全一致, 才会跳转.
<Route exact path="/" component={
Home} />
<Route path="/about" component={
About} />
<Route path="/profile" component={
Profile} />
</BrowserRouter>
)
}
}
팁 : 라우터가 포함되어 있습니다 Link, Route어떤 Link, 경로를 나타내는 Route경로에 해당하는 구성 요소를 나타냅니다 그래서 그 클릭하여 Link해당 페이지로 이동합니다.
- 라우터, 경로, NavLink 사용 :
import React, {
Component } from 'react';
import {
BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './pages/home';
import About from './pages/about';
import Profile from './pages/profile';
export default class App extends React.Component {
render() {
return (
<BrowserRouter>
<NavLink to="/" activeStyle={
{
color: "red"}}>首页</NavLink>
<NavLink to="/about" activeStyle={
{
color: "red"}}>关于</NavLink>
<NavLink to="/profile" activeStyle={
{
color: "red"}}>我的</NavLink>
// exact为精准配置, 只有路径完全一致, 才会跳转.
<Route exact path="/" component={
Home} />
<Route path="/about" component={
About} />
<Route path="/profile" component={
Profile} />
</BrowserRouter>
)
}
}
팁 : 많은 및 속성 과 NavLink비교할 때 NavLink의 기본 활성화 된 클래스는 입니다. 혼동이 두렵다면 사용자 정의 클래스 이름을 사용할 수 있습니다.LinkactiveClassNameactiveStyleactive
<NavLink to="/" activeStyle={
{
color: "red"}} activeClassName='link-active'>首页</NavLink>
팁 : 경로 검색이 활성화되어 있으면 정확한 일치 를 위해 /루트를 route추가 해야합니다 exact.
- 스위치, 라우터, 경로,
import React, {
Component } from 'react';
import {
BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './pages/home';
import About from './pages/about';
import Profile from './pages/profile';
export default class App extends React.Component {
render() {
return (
<BrowserRouter>
<NavLink to="/" activeStyle={
{
color: "red"}}>首页</NavLink>
<NavLink to="/about" activeStyle={
{
color: "red"}}>关于</NavLink>
<NavLink to="/profile" activeStyle={
{
color: "red"}}>我的</NavLink>
<Switch>
// 加上switch后, 匹配到第一个后, 就不会往后配置, 这样就不会出现, 有路径在其中就被渲染.
<Route exact path="/" component={
Home} />
<Route path="/about" component={
About} />
<Route path="/profile" component={
Profile} />
</Switch>
</BrowserRouter>
)
}
}
팁 : Switch태그는 Route유일한 태그 와 일치하도록 추가 됩니다 Route.
Redirect사용법 :
user.info ? show(userInfo): <Redirect to: '/login'>
팁 : 사용자 정보가 있으면 직접 로그인하고 그렇지 않으면 로그인 페이지로 이동하여 로그인하십시오.
多层路由:
// 挑战到cart购物车下的shopInfo商品信息页面
<Route path="/cart/shopInfo" component={
About} />
编程式路由:
// 页面中的跳转点击函数
<button onClick= {
this.toCart}>跳转到购物车</button>
// 函数中的跳转点击函数定义
toCart() {
// 这是跳转到cart, 保留当前页.
this.props.history.push('/cart')
//这是替换为cart, 当前页被cart替换了.
this.props.history.replace('/cart')
}