【React】路由详解
文章目录
- 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】路由详解相关推荐
- RN和React路由详解及对比
前言 在平时H5或者RN开发时,我们业务场景中大部分都不是单页面的需求,那这时我们就能使用路由在进行多页面的切换.下面会对比一下react路由和RN路由的本质区别和使用方法. 路由(routing)是 ...
- rn php,RN和React路由详解及对比
前言 在平时H5或者RN开发时,我们业务场景中大部分都不是单页面的需求,那这时我们就能使用路由在进行多页面的切换.下面会对比一下react路由和RN路由的本质区别和使用方法. 路由(routing)是 ...
- React 路由详解(超详细详解)
React React 路由 对SPA的理解 1.单页Web应用(single page web application,SPA). 2.整个应用只有一个完整的页面. 3.点击页面中的链接不会刷新页面 ...
- React Router路由详解
React Router路由详解 一.基础 1.安装使用 2.React Router 中通用的组件 路由组件 BrowserRouter 和 HashRouter 路径匹配组件: Route 和 S ...
- Ocelot简易教程(三)之主要特性及路由详解
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9664977.html 上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个 ...
- vue路由详解 --基础
vue路由详解 --基础 1.router-link 和router-view组件 router-link相当于封装了一个a标签 router-view为组件显示的位置 <router-link ...
- React 源码系列 | React Context 详解
目前来看 Context 是一个非常强大但是很多时候不会直接使用的 api.大多数项目不会直接使用 createContext 然后向下面传递数据,而是采用第三方库(react-redux). 想想项 ...
- elasticsearch系列三:索引详解(分词器、文档管理、路由详解(集群))
目录 一.分词器 1. 认识分词器 1.1 Analyzer 分析器 1.2 如何测试分词器 2. 内建的字符过滤器(character filter) 2.1 HTML过滤字符过滤器(HTML S ...
- angular路由详解
angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...
- 静态路由和默认路由详解及配置方法️
目录 一.路由详解 1.路由器工作原理: 2.路由表形成: 3.直连路由: 4.非直连路由: 二.静态路由 1.静态路由详解: 2.配置静态路由 三. 默认路由: 1.默认路由详解 2.配置默认路由方 ...
最新文章
- Qos和区分服务(DiffServ)
- 026_jdbc-mysql-PrepareStatement解决sql注入
- SqlServer 2008 R2定时备份数据库,并且发送邮件通知
- MybatisCodeHelperNew-2.8.1-191-201插件使用
- C++模板函数只声明一种类型但输入两种类型参数
- Week of year bug in Ax3
- MySQL复制篇之---半同步复制
- 获取打印机分辨率_喵喵机体验——爱不释手的错题打印机
- 为什么是NoSQL数据库?
- 樊登读书会终身成长读后感_樊登读书会听书《终身成长》学习感悟
- Airbnb产品运营数据分析
- 跨境电商运营 | 如何利用Instagram进行电子商务营销
- Linux中磁盘的管理(格式化、分区、挂载)
- Premiere视频调色处理,将彩色画面转变成黑白色 myblogfree
- [Linux] Ansible及playbook实操步骤
- Appletviewer运行swing
- 最详细破解nessus(windows)教程 插件更新至20220830
- 使用python爬取猫眼电影、房王、股吧论坛、百度翻译、有道翻译、高德天气、华夏基金、扇贝单词、糗事百科(股吧论坛)
- 一个神奇的词:“迭代”
- 赚钱 36 计 - 第二十三计:晋级计