文章目录

  • Router 介绍
  • Router 原理
  • Router 安装
  • Router 使用
  • Link 和 NavLink
  • Route 属性
    • path 属性
    • exact 属性
  • Route 组件
    • component
    • render
    • children
  • Route 传参
    • `match.params`
    • `location.search`
    • `location.state`
  • Switch 使用
    • 优化性能
    • 处理 404 页面
  • Redirect 使用
  • withRouter 函数
  • 嵌套路由
  • 路由守卫

Router 介绍

SPA 介绍

- 单页web应用
- 整个应用只有**一个完整的页面**
- 点击页面中的链接`不会刷新`页面，只会做页面的**局部刷新**
- 数据都需要通过 ajax 请求获取，并在前端异步展现
  • 一个路由就是一个映射关系（key-value）
  • key 为路径，value 可能是 function 或 component
  • Route【路由】：可以理解为现实中路由器后面的接口
  • Router【路由器】：可以理解为现实中的路由器用来管理路由
  • react 的一个插件库
  • 专门用来实现一个 SPA 应用
  • 基于 react 的项目基本都会用到的库
  • 之前版本的思想是传统的思想：路由应该统一在一处渲染
  • Router 4之后是这样的思想：一切皆组件
  • React Router包含了四个包:
包名 使用途径
react-router 在任何地方使用
react-router-dom 在 web 开发中使用
react-router-native 在 native 开发中使用
react-router-config 静态路由的配置
  • 我们前端主要使用react-router-dom

Router 原理

React Router甚至大部分的前端路由都是依赖于history.js的，它是一个独立的第三方js库。可以用来兼容在不同浏览器、不同环境下对历史记录的管理，拥有统一的API。

老版本浏览器:

  • 通过hash来存储在不同状态下的history信息，对应createHashHistory，通过检测location.hash的值的变化，使用location.replace方法来实现url跳转。通过注册监听window对象上的hashChange事件来监听路由的变化，实现历史记录的回退。

高版本浏览器:

  • 利用HTML5里面的history，对应createBrowserHistory, 使用包括pushState， replaceState方法来进行跳转。通过注册监听window对象上的popstate事件来监听路由的变化，实现历史记录的回退。

node 环境下:

  • 在内存中进行历史记录的存储，对应createMemoryHistory。直接在内存里push和pop状态。

Router 安装

  • 安装依赖指令：
npm i -S react-router-dom
或者：
yarn add react-router-dom

  • 安装依赖：npm i -S react-router-dom

  • 使用时，路由器 Router 就是 React 的一个组件。

  • Router 组件本身只是一个容器，真正的路由要通过 Route 组件定义。

Router 使用

  • Route 有两种方式：
  • HashRouter 和 BrowserRouter
区别 HashRouter BrowserRouter
底层原理 使用URL的哈希值 使用H5的history API，不兼容IE9
url形式 路径中包含# 路径中没有#
刷新后对state参数的影响 会导致state参数丢失 没有任何影响
其他 可以解决一些路径上的错误
  • 为了书写方便，我们可以取个别名Router
import { HashRouter as Router, Route} from 'react-router-dom';
或：
import { BrowserRouter as Router, Route} from 'react-router-dom';
  • 用来监听浏览器地址栏的变化，并将URL解析成一个地址对象
  • 整个应用最好只用一个路由器去管理

import React from 'react';
// 引入路由组件
import { BrowserRouter as Router } from 'react-router-dom';
// 引入头部组件
import Header from '../components/header/Header';// 创建路由表
const App = () => (<Router><Header /></Router>
)
export default App;

HashRouter

  • 如果设为HashHistory，路由将通过URL的hash部分（#）切换，URL的形式类似http://localhost:3000/#/
import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route} from 'react-router-dom';const Home = () => (<div>首页</div>)
const App = () => (<Router><div><Route path={"/"} component={Home} /></div></Router>
)
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);

BrowserRouter

  • 如果设为BrowserHistory，浏览器的路由就不再通过Hash完成了，而显示正常的路径http://localhost:3000/about
import { BrowserRouter as Router, Route} from 'react-router-dom';

Link 和 NavLink

  • Link组件用于取代<a>元素，生成一个链接，允许用户点击后跳转到另一个路由。
  • 算是<a>元素的React 版本，可以接收Router的状态
<Link to="/about" ></Link>
相当于
<a href="/about"><a/>
  • to后面的链接地址写小写，不要写大写。/前面不能出现.什么的
  • <Link>标签必须写在<Router>标签里面
  • <Route>标签path路径必须与<Link>标签to路径一致才能实现跳转
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route,Link} from 'react-router-dom';const Home = () => (<div>首页</div>)
const About = () => (<div>关于我们</div>)
const App = () => (<Router><div><Link to={"/"} exact={true} >首页</Link>---<Link to={"/about"} >关于我们</Link></div>{/* exact={true}  只完全匹配/ */}<div><Route path={"/"} exact={true} component={Home} /><Route path={"/about"} component={About} /></div></Router>
)
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);


  • NavLink是Link的升级版
  • NavLink和Link都可以在里面设置样式
  • 但是只有NavLink可以追加样式
  • 常用于标签切换的高亮显示
  • NavLink还有个独特的属性activeClassName
  • 谁被点击就会追加activeClassName里面的样式
  • 比如：activeClassName="YellowColor"
.YellowColor{color= "yellow";
}

import { BrowserRouter as Router, Route,NavLink} from 'react-router-dom';
<Router><div><NavLink to={"/"} activeClassName="YellowColor" exact={true} >首页</Link>---<NavLink to={"/about"} >关于我们</Link></div>
</Router>

封装 NavLink

  • 封装后属于一般组件
  • 标签体内容是一个特殊的标签属性
  • 通过this.props.children可以获取标签体内容
import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
export default class MyNavLink extends Component{const {to,title} = this.props;render(){return(<NavLink to={to} activeClassName="YellowColor" >{title}</NavLink>)}
}
  • 使用：
<MyNavLink to="/home" title="Home页" />
  • 优化：
import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
export default class MyNavLink extends Component{// const {to,title} = this.props;// 使用{...this.props}直接进行解构render(){// {...this.props}有个children属性，用来存储标签体里面的内容// 所以这里可以使用单标签，并且内容“Home页”也能展示出来return(<NavLink to={to} activeClassName="YellowColor" {...this.props} />)}
}
  • 使用：
<MyNavLink to="/home">Home页</MyNavLink>

Route 属性

path 属性

Route组件的path属性用来匹配导航地址和路由地址是否匹配，匹配的话就加载Route标签绑定的组件

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route} from 'react-router-dom';const Home = () => (<div>首页</div>)
const About = () => (<div>关于我们</div>)
const App = () => (<Router><div><Route path={"/main"} component={Home} /><Route path={"/about"} component={About} /></div></Router>
)
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);
  • 当地址为http://localhost:3000/main，页面会加载首页组件
  • 当地址为http://localhost:3000/about，页面会加载关于我们组件

如果不写路径，那么会加载所有组件。

<Router><div><Route  component={Home} /><Route  component={About} /></div>
</Router>

如果路径相同，那么会加载所有组件

<Router><div><Route path={"/about"} component={Home} /><Route path={"/about"} component={About} /></div>
</Router>

exact 属性

exact 属性表示是否精准的匹配路径。有两个值true和false

  • exact={true} 或 exact：表示精准的匹配
  • exact={false} 或 不写：表示模糊的匹配

模糊的匹配：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route,Link } from 'react-router-dom';const Home = () => (<div>首页</div>)
const About = () => (<div>关于我们</div>)const App = () => (<Router><Link  to={"/about"}  >About</Link><Route path={"/"}   component={Home} /><Route path={"/about"} component={About} /></Router>
)
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);

精准的匹配：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route,Link } from 'react-router-dom';const Home = () => (<div>首页</div>)
const About = () => (<div>关于我们</div>)const App = () => (<Router><Link  to={"/about"}  >About</Link><Route exact path={"/"}   component={Home} /><Route path={"/about"} component={About} /></Router>
)
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);

Route 组件

一般组件在现实开发中一般放在src/components目录下。
路由组件在现实开发中一般放在src/pages目录下。

  • 我们一般的组件是这样写的：<Home />
  • 我们的路由组件写在：<Router />里面的
  • 而<Route /> 设置路由对应的组件有 3 种形式：
  • component、render、children

component

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
//BrowserRouter 不带#，NavLink有激活状态链接效果
const Home = () => (<div>首页页面</div>)
const App = () => (<Router><div><NavLink to={"/"} exact={true} >首页</NavLink></div>{/*   只完全匹配/ */}<div><Route path={"/"} exact={true} component={Home} /></div></Router>
)
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);


render

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
//BrowserRouter 不带#，NavLink有激活状态链接效果
const Home = () => (<div>首页</div>)
const App = () => (<Router><div><NavLink to={"/"} exact={true} >首页</NavLink>---<NavLink to={"/render"}>render</NavLink></div>{/*   只完全匹配/ */}<div><Route path={"/"} exact={true} component={Home} /><Route path="/render" render={() => <div>render页面</div>} /></div></Router>
)
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);


children

  • children 比较特殊，每个页面都会匹配上
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
//BrowserRouter 不带#，NavLink有激活状态链接效果
const Home = () => (<div>首页页面</div>)
const App = () => (<Router><div><NavLink to={"/"} exact={true} >首页</NavLink>---<NavLink to={"/child"}>children</NavLink></div>{/*   只完全匹配/ */}<div><Route path={"/"} exact={true} component={Home} />{/* children 比较特殊，每个页面都会匹配上 */}<Route path="/child" children={() => <div>children页面</div>} /></div></Router>
)
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);


Route 传参

  • 路由传参有三种方式：

match.params

路由链接（携带参数）：<NavLink></NavLink>
注册路由（声明接收）：<Route></Route>
接收参数：const{id,text} = this.props.math.params

  • 传递一个参数：
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
//BrowserRouter 不带#，NavLink有激活状态链接效果 const About = (props) => (<div>关于我们<br />接收到的 id ：{props.match.params.userid}</div>
)
class App extends Component {constructor(props) {super(props);this.state = {list: [{id:1,text:"aaa"},{id:2,text:"bbb"},],}}render() {const { list } = this.state;console.log(list.id);return (<Router>{/* 静态传递params参数 */}<NavLink to={"/about/666"}>About1</NavLink>---{/* 动态传递params参数 */}<NavLink to={`/about/${list[0].id}`}>About2</NavLink>{/* 声明接收params参数 */}<Route path={"/about/:userid"} component={About} /><Route path={"/"} exact={true} component={Home} /></Router>);}
}
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);


  • 传递多个参数：
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
//BrowserRouter 不带#，NavLink有激活状态链接效果 const About = (props) => (<div>关于我们<br />接收到的 id ：{props.match.params.userid}<br/>接收到的 text ：{props.match.params.usertext}</div>
)
class App extends Component {constructor(props) {super(props);this.state = {list: [{id:1,text:"aaa"},{id:2,text:"bbb"},],}}render() {const { list } = this.state;console.log(list.id);return (<Router>{/* 静态传递多个params参数 */}<NavLink to={"/about/666/ccc"}>About1</NavLink>---{/* 动态传递多个params参数 */}<NavLink to={`/about/${list[0].id}/${list[0].text}`}>About2</NavLink>{/* 声明接收多个params参数 */}<Route path={"/about/:userid/:usertext"} component={About} /></Router>);}
}
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);


location.search

路由链接（携带参数）：<NavLink></NavLink>
注册路由（不用接收）：<Route></Route>
接收参数：new URLSearchParams(props.location.search).get('id')

  • 案例 1：
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
//BrowserRouter 不带#，NavLink有激活状态链接效果 const About = (props) => (<div>关于我们<br />接收到的 id ：{new URLSearchParams(props.location.search).get('id')}<br/>接收到的 text ：{new URLSearchParams(props.location.search).get('text')}</div>
)
class App extends Component {constructor(props) {super(props);this.state = {list: [{id:1,text:"aaa"},{id:2,text:"bbb"},],}}render() {const { list } = this.state;console.log(list.id);return (<Router>      {/* 静态传递多个search参数 */}<NavLink to={"/about/666/?id='11'&text='ccc'"}>About1</NavLink>---{/* 动态传递多个search参数 */}<NavLink to={`/about/?id=${list[0].id}&text=${list[0].text}`}>About2</NavLink>{/* 无需声明接收search参数 */}<Route path={"/about"} component={About} /></Router>);}
}
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);


  • 案例 2：
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
//BrowserRouter 不带#，NavLink有激活状态链接效果
const Home = () => (<div>首页</div>)
class Cart extends Component {render() {console.log(this.props);return (<div>购物车页面<br/>{/* URLSearchParams：解构？号后面的数据 */}用户ID：{new URLSearchParams(this.props.location.search).get('id')}<br/>用户名：{new URLSearchParams(this.props.location.search).get('name')}</div>);}
}
const App = () => (<Router><div><NavLink to={"/"} exact={true} >首页</NavLink>---<NavLink to={{ pathname: "/cart", search: "?id=123&name=lili" }}>购物车</NavLink></div>{/*   只完全匹配/ */}<div><Route path={"/"} exact={true} component={Home} /><Route path={"/cart"} component={Cart} /></div></Router>
)
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);

location.state

路由链接（携带参数）：<NavLink></NavLink>
注册路由（声明接收）：<Route></Route>
接收参数：const{id,text} = this.props.math.params

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
//BrowserRouter 不带#，NavLink有激活状态链接效果 class About extends Component {render() {console.log(this.props);return (<div>关于我们<br />{console.log(this.props.location.state)}接收到的 id ：{this.props.location.state.id||{}}<br/>接收到的 text ：{this.props.location.state.text||{}}</div>);}
}
// state在函数组件里面接收不到参数
// const About = (props) => (
//   <div>关于我们<br />
//     {console.log(props.location.state)}
//      接收到的 id ：{props.location.state.id||{}}<br/>
//     接收到的 text ：{props.location.state.text||{}}
//   </div>
// )
class App extends Component {constructor(props) {super(props);this.state = {list: [{id:1,text:"aaa"},{id:2,text:"bbb"},],}}render() {const { list } = this.state;return (<Router>    {/* 静态传递多个state参数 */}<NavLink to={{pathname:"/about",state:{id:'11',text:'ccc'}}}>About1</NavLink>---{/* 动态传递多个state参数 */}<NavLink to={{pathname:"/about",state:{id:list[0].id,text:list[0].text}}}>About2</NavLink>{/* 无需声明接收state参数 */}<Route path={"/about"} component={About} /></Router>);}
}
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);


Switch 使用

一个Router里面有多个Route，当路径匹配到了对应的Route，它还会往下继续匹配，直到所有Route都匹配完，这样就很浪费性能。

还有一个问题，如果两个Route里面的path路径是一样的，那么就会把他们两个对应的不同组件都展示出来，但是你想要的其实只是其他一个。

  • Switch：匹配到第一个对应的Route之后就不再往下匹配了，可以优化性能

优化性能

  • 不使用Switch：

  • 使用Switch：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route,Switch } from 'react-router-dom';const Home = () => (<div>首页</div>)
const About = () => (<div>关于我们</div>)const App = () => (<Router><Switch><Route path={"/home"}  component={Home} /><Route path={"/home"} component={About} /></Switch></Router>
)
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);

处理 404 页面

  • 404页面组件需要放在路由表的最后面

  • 不使用switch：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link} from 'react-router-dom';
//BrowserRouter 不带#，NavLink有激活状态链接效果
const Home = () => (<div>首页页面</div>)
class Cart extends Component {render() {return (<div>购物车页面</div>);}
}
const App = () => (<Router><div><Link to={"/"} exact={true} >首页</Link>--<Link to={{ pathname: "/cart" }}>购物车</Link></div>{/*  exact={true}： 表示只完全匹配/ */}<div>{/* <Switch> */}<Route path={"/"} exact={true} component={Home} /><Route path={"/cart"} component={Cart} /><Route render={() => <div>404页面</div>} />{/* </Switch> */}</div></Router>
)
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);


  • 使用switch：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';
//BrowserRouter 不带#，NavLink有激活状态链接效果
const Home = () => (<div>首页页面</div>)
class Cart extends Component {render() {return (<div>购物车页面</div>);}
}
const App = () => (<Router><div><Link to={"/"} exact={true} >首页</Link>--<Link to={{ pathname: "/cart" }}>购物车</Link></div>{/*  exact={true}： 表示只完全匹配/ */}<div><Switch><Route path={"/"} exact={true} component={Home} /><Route path={"/cart"} component={Cart} /><Route render={() => <div>404页面</div>} /></Switch></div></Router>
)
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);



Redirect 使用

  • Redirect ：可以使路径重定向
  • 一般放在Route的最小方
  • 意思就是你当前的路径，和所有Route里面的路径都匹配不上，那么他就会跳转到他自定义的一个路径
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route,Link, Redirect } from 'react-router-dom';const Home = () => (<div>首页</div>)
const About = () => (<div>关于我们</div>)const App = () => (<Router><Route path={"/home"}   component={Home} /><Redirect to="/home"/></Router>
)
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);


withRouter 函数

  • withRouter 可以给普通的组件添加路由属性
  • 一般用在头部，尾部，withRouter 用法是高阶组件
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import "./header.css"
class Header extends Component {constructor(props) {super(props);this.state = {}}goFenlei = () => {console.log(this);//Header 是一个组件，他不存在 路由中的history属性//可以使用 withRouter的高阶组件添加 history属性this.props.history.push("/about/23");}render() {return (<div className="header">头部<button onClick={this.goFenlei}>点击跳转到关于我们</button></div>);}
}
export default withRouter(Header);

嵌套路由

  • 就是路由的里面再写路由
  • 嵌套路由时，需要带上上一级的路径
  • 有子路由的页面，不能使用 exact = {true}
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
//BrowserRouter 不带#，NavLink有激活状态链接效果 //需求：center页面中有两个子页面
class Center extends Component {render() {return <div>用户中心页面<br/><Link to="/center/child1">子页1</Link>||<Link to="/center/child2">子页2</Link><div className="child"><Route path="/center/child1" component={Child1} /><Route path="/center/child2" component={Child2} /></div></div>;}
}const Child1 = () => (<div>子页 1 页面</div>)
const Child2 = () => (<div>子页 2 页面</div>)const App = () => (<Router><div><Link to={"/center"} >用户中心</Link></div><div><Route path={"/center"} component={Center} /></div></Router>
)
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);


路由守卫

  • Redirect 重定向 ，可以做路由前置守卫
  • Prompt 路由后置守卫
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, Switch, Redirect, Prompt } from 'react-router-dom';
//BrowserRouter 不带#，NavLink有激活状态链接效果
const Home = () => (<div>首页</div>)class Center extends Component {render() {return (loginType ? <div>用户中心</div> : <Redirect to="/login" />);}
}const Login = (props) => (<div>登录</div>)
class Cart extends Component {render() {console.log(this.props);return (<div>购物车页面<Prompt when={true} message={"您确定要离开这个页面么？"} /></div>);}
}
let loginType = false;
const App = () => (<Router><div><Link to={"/"} exact={true} >首页</Link>--<Link to={{ pathname: "/cart" }}>购物车页面</Link>--<Link to={"/center"} >用户中心</Link>--<Link to={"/login"}  >登录</Link></div><div><Switch><Route path={"/"} exact={true} component={Home} /><Route path={"/cart"} component={Cart} /><Route path={"/center"} component={Center} /><Route path={"/login"} component={Login} /><Redirect from="/*" to="/" />{/* 404页面定位到首页 */}</Switch></div></Router>
)
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);

上面代码实现的功能：
1. 给购物车页面设置了Prompt 路由后置守卫
2. 当你想离开购物车页面时，会弹出一个确认框
3. 给404页面设置了 Redirect 重定向
4. 当路径不对时，会重新定向到login登录页面
5. 给用户中心页面设置了Redirect 路由前置守卫
6. 当你为登录时，无法打开用户中心，只能跳转到login登录页面先登录

上一篇博客：路由介绍

【React】路由详解相关推荐

  1. RN和React路由详解及对比

    前言 在平时H5或者RN开发时,我们业务场景中大部分都不是单页面的需求,那这时我们就能使用路由在进行多页面的切换.下面会对比一下react路由和RN路由的本质区别和使用方法. 路由(routing)是 ...

  2. rn php,RN和React路由详解及对比

    前言 在平时H5或者RN开发时,我们业务场景中大部分都不是单页面的需求,那这时我们就能使用路由在进行多页面的切换.下面会对比一下react路由和RN路由的本质区别和使用方法. 路由(routing)是 ...

  3. React 路由详解(超详细详解)

    React React 路由 对SPA的理解 1.单页Web应用(single page web application,SPA). 2.整个应用只有一个完整的页面. 3.点击页面中的链接不会刷新页面 ...

  4. React Router路由详解

    React Router路由详解 一.基础 1.安装使用 2.React Router 中通用的组件 路由组件 BrowserRouter 和 HashRouter 路径匹配组件: Route 和 S ...

  5. Ocelot简易教程（三）之主要特性及路由详解

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9664977.html 上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个 ...

  6. vue路由详解 --基础

    vue路由详解 --基础 1.router-link 和router-view组件 router-link相当于封装了一个a标签 router-view为组件显示的位置 <router-link ...

  7. React 源码系列 | React Context 详解

    目前来看 Context 是一个非常强大但是很多时候不会直接使用的 api.大多数项目不会直接使用 createContext 然后向下面传递数据,而是采用第三方库(react-redux). 想想项 ...

  8. elasticsearch系列三：索引详解（分词器、文档管理、路由详解（集群））

    目录 一.分词器​ 1. 认识分词器 1.1 Analyzer 分析器 1.2 如何测试分词器 2. 内建的字符过滤器(character filter) 2.1 HTML过滤字符过滤器(HTML S ...

  9. angular路由详解

    angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...

  10. 静态路由和默认路由详解及配置方法️

    目录 一.路由详解 1.路由器工作原理: 2.路由表形成: 3.直连路由: 4.非直连路由: 二.静态路由 1.静态路由详解: 2.配置静态路由 三. 默认路由: 1.默认路由详解 2.配置默认路由方 ...

最新文章

  1. [转]VSTO Office二次开发应用程序键盘鼠标钩子
  2. in作为介词的用法_英语中in/on/at/to/from/by/with/for/about/after/before的用法
  3. 在家做什么能让隔壁报警？| 今日最佳
  4. vue：axios二次封装，接口统一存放
  5. 线程同步（互斥锁与信号量的作用与区别）
  6. 免费计算机网络同传系统,使用网络同传功能批量完成系统安装
  7. 应用信息获取ActivityManager
  8. iOS 地址智能解析器（收货地址 或 寄件地址）
  9. 惠普打印机扫描软件安装
  10. Facebook承诺为普通市民提供1500套住房
  11. 微星B450mMortar迫击炮+AMD速龙3000GE安装Windows7 SP1并使用UEFI+Nvme启动
  12. markdown数学公式(MathJax)
  13. CyanogenMode主题模块解析(中)
  14. 愿天下有情人都是失散多年的兄妹 (25分)
  15. 希冀平台1-5：针对salaries表emp_no字段创建索引idx_emp_no，查询emp_no为10005, 使用强制索引。 CREATE TABLE `salaries` ( `emp_no`
  16. Sketch网页截屏插件设计开发
  17. 【若依vue内容长宽设置】
  18. 恢复视力方法(仅供参考）
  19. unity中的渲染优化技术
  20. LTI系统的频域分析法

热门文章

  1. 115-登录态接口11/
  2. Meashlab读取txt文件
  3. 如何用提取网页内容的工具快速提取网站内容
  4. JavaScript-58：打印五行五列星星
  5. 【数据结构与算法】马踏棋盘(骑士周游世界)算法
  6. 干货！带你了解3D MAX
  7. HDU之小小作者-----Mer de sause;
  8. 天纵智能软件快速开发平台文件管理插件一
  9. Apache Geode配置和运行集群
  10. 水晶球 | 贪心、排序