1:路由原理-router
<button onclick="goToSet()">点击去set</button>
<button onclick="goToHome()">点击去home</button>
<button onclick="goBack()">返回</button>
//hash
function goToSet(){
location.hash = "red";
}
function goToHome(){
location.hash= "yellow";
}
function goBack(){
history.go(-1);
}
// onhashchange:当地址栏hash变化时触发;
window.onhashchange = function(event){
console.log(event);
console.log(location);
//
const hash = location.hash.slice(1);
//
document.body.style.backgroundColor = hash;
}
// hash 特点: #
// 利用location对象,通过监听onhashchange 事件,实现路由切换和匹配
function goBack() {
history.go(-1);
}
function goToSet() {
//
history.pushState({
color: "red"
}, "red", "red");
document.body.style.backgroundColor = "red";
}
function goToHome() {
history.pushState({
color: "yellow"
}, "yellow", "yellow");
document.body.style.backgroundColor = "yellow";
}
// pushstate后,前进forward后退back时,可以触发
window.onpopstate = function (event) {
console.log(event);
document.body.style.backgroundColor = event.state.color;
}
// 路由原理:通过监听事件,利用history对象中api 实现浏览器中 path的变化
2:写一个简单的:通过状态来改变路由显示
import React, { useEffect,useState } from 'react'
import About from "./About";
import Home from './Home'
import Inbox from './Inbox';
export default function App() {
let [route,setRoute] = useState(window.location.hash.substr(1))
useEffect(() => {
window.addEventListener('hashchange', () => {
setRoute( window.location.hash.substr(1));
})
})
let Child
switch (route) {
case '/about': Child = About; break;
case '/inbox': Child = Inbox; break;
default: Child = Home;
}
return (
<div>
<h1>App</h1>
<ul>
<li><a href="#/about">About</a></li>
<li><a href="#/Home">Home</a></li>
</ul>
<Child />
</div>)
}
3:路由基本使用
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter,HashRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
//两种模式 : HashRouter 和 BrowserRouter
let Router = BrowserRouter ;
root.render(
// 如果使用hash路由模式。请用<HashRouter>组件
<Router>
<App />
</Router>
);
import React from 'react'
import { Link, HashRouter,BrowserRouter, Route,Router } from "react-router-dom";
import About from "./pages/About";
import Home from './pages/Home';
export default function App() {
return (
<div>
<h1>App</h1>
<ul>
{/* Link 作用:更改url中中路由地址变化(path) */}
<li><Link to="/about">About</Link></li>
<li><Link to="/Home">Home</Link></li>
</ul>
<div>
{/*
Route 注册路由组件
path 作用:告诉Route 哪一个path地址,可以配置到当前注册的路由组件
component 作用:将普通的组件,注册为路由组件。
我们认为路由组件属于页面组件
*/}
<Route path={'/about'} component={About} />
<Route path={'/Home'} component={Home} />
</div>
</div>
)
}
4:路由组件_普通组件
# 路由组件和一般组件
1.写法不同:
- 普通组件:<component />
- 路由组件:<Route path="" component={component} />
2.开发者规范中,存放路径不同
- 普通组件:components/xxx
- 路由组件:pages/xxx
3.找bug方式不同:
- 普通组件:
- 1:导入组件路径对不对
- 2:介绍践变量名字单词是否大写
- 路由组件:
- 1: 看url中路由地址
- 2: 看注册的path与 url的路由地址是否一致
- 3: 看component属性注册的组件对不对
4.props接收的值不同:
- 普通组件: 自定义属性传值
- 路由组件: 注册并渲染会自动传值
- history
- location
- match
- 记录路由地址详情详细,或者提供修改路由地址方法
5:NavLink_路由高亮
# 路由高亮显示
>更具<NavLink /> 组件特点实现高亮显示
方式一:
- 通过设置选中路由的class类名为 `router-active'` 在通过css设置`router-active` 样式实现高亮显示
code :
~~~App.jsx
<NavLink activeClassName='router-active' to="/Home">Home</NavLink>
~~~
~~~css
.router-active{
color: #f9f9f9;
background-color: blueviolet;
}
~~~
方式二:
- 通过`activeStyle` 给选中路由设置高亮样式
~~~jsx
<NavLink activeStyle={{
fontWeight: 'bold',
color: 'red'
}} to="/about">About</NavLink>
~~~
import React from 'react'
import { NavLink, Route } from "react-router-dom";
import './App.scss'
import About from "./pages/About";
import Home from './pages/Home';
export default function App() {
return (
<div>
<h1>App</h1>
<main>
<ul className='nav'>
{/*
1 NavLink 链接标签,作用:更改url中path
2 编译后为a标签。当前选中 链接 会有 class=“active'
3 activeClassName 更改默认选中的类名
4 用途:实现路由的高亮显示
5:activeStyle 对象, 作用:给选中路由单独设置样式
*/}
<li><NavLink activeStyle={{
fontWeight: 'bold',
color: 'red'
}} activeClassName='router-active' to="/about">About</NavLink></li>
<li><NavLink activeClassName='router-active' to="/Home">Home</NavLink></li>
</ul>
<div id='content'>
{/*
Route 注册路由组件
path 作用:告诉Route 哪一个path地址,可以配置到当前注册的路由组件
component 作用:将普通的组件,注册为路由组件。
我们认为路由组件属于页面组件
*/}
<Route path={'/about'} component={About} />
<Route path={'/Home'} component={Home} />
</div>
</main>
</div>
)
}
6:路由匹配模式
# 路由匹配模式
> 指的是url中路由地址,选中react中哪些组件?
> - 链接组件 (路由高亮匹配)
> - 路由组件 (路由渲染的匹配)
**两种模式**
- 精准匹配(exact)
- > 必须式某个地址`/path` 才能匹配成功
- 模糊匹配(默认)
- > 一某个地址 为开头的配置规则 `/^\/path*/`
## 路由高亮的匹配
>NavLink
之前哪一个`NavLink` 被激活了。然后添加class类名,
- 1:activeClass 修改默认 class类名
- 2:给class设置样式
**精准匹配**
~~~js
<NavLink exact />
~~~
## 路由展示匹配
>Route
> 让url中path地址,与 Route 中path属性比较,匹配到Route后,在看componet 注册哪个组件,然后渲染的是注册的路由组件
**精准匹配:**
~~~js
<Route exact />
~~~
**example:**
~~~
1:如果 /home 可以匹配到 home组件
/home ---匹配--> home组件
/home/a/v ---匹配--> home组件
/a/home/b ---不能匹配到-->home组件
~~~
## 路由找bug思路:
样式错误:
- 1:看浏览器编译后的代码,解析的html css
- 2: 看浏览器的`/path` 与 `NavLink`的to的赋值,是否存在,
- 3:activeClass 赋值,在css中是否存**有效的选择器样式**
以上都没有问题:`看看是不是浏览器在解析时候丢失了样式文件。`
渲染错误:
- 一看,url的path
- 二看:Route 的 path,与url的path是否一致?
- 三看:Route 中componet注册组件是否存在?
import React from 'react'
import { NavLink, Route } from "react-router-dom";
import './App.scss'
import About from "./pages/About";
import Home from './pages/Home';
import A from './pages/A';
export default function App() {
return (
<div>
<h1>App</h1>
<main>
<ul className='nav'>
{/*
1 NavLink 链接标签,作用:更改url中paht
2 编译后为a标签。当前选中 链接 会有 class=“active'
3 activeClassName 更改默认选中的类名
4 用途:实现路由的高亮显示
5:activeStyle 对象, 作用:给选中路由单独设置样式
*/}
<li><NavLink activeStyle={{
fontWeight: 'bold',
color: 'red'
}} activeClassName='router-active' to="/about">About</NavLink></li>
{/*
exact 告诉react-router 只有只有路由地址为 /Home 才能添加class='router-active'
*/}
<li><NavLink activeClassName='router-active' exact to="/Home">Home</NavLink></li>
{/*
只要以为/Home/a/* 开头的地址,都可以添加class='router-active'
*/}
<li><NavLink activeClassName='router-active' to="/Home/a">ABC</NavLink></li>
<li><NavLink activeClassName='router-active' to="/Home/a/b">DAFSD</NavLink></li>
<li><NavLink activeClassName='router-active' to="/A/Home/B">DAFSD</NavLink></li>
</ul>
<div id='content'>
{/*
1:path 根据 url 中路由地址 匹配路由组件。渲染
2:默认匹配规则:模糊匹配:
/about 只要路由地址为 /about开头 /about /about/a/b 都可以匹配About组件,渲染
/Home 只要以/home开头 /home /home/a 都可以匹配Home 并渲染home
*/}
<Route path={'/about'} component={About} />
{/*
exact 只有地址为/home的组件才能匹配到
*/}
<Route exact path={'/Home'} component={Home} />
<Route path={'/Home/a'} component={A} />
</div>
</main>
</div>
)
}
7:Switch 在多个匹配结果中,渲染第一个Route
# Switch
注意:最新版本的 react-router@6 已经删除了
>Switch 在多个匹配结果中,渲染第一个Route
案例:看 app.jsx
通过注释Switch方式测试。
import React from 'react'
import './App.scss'
import { NavLink, Route, Switch } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home';
import A from './pages/A';
export default function App() {
return (
<div>
<h1>App</h1>
<main>
<ul className='nav'>
<li>
<NavLink activeClassName='router-active' to={'/about'}>about</NavLink>
</li>
<li>
<NavLink activeClassName='router-active' to={'/home'}>home</NavLink>
</li>
<li>
<NavLink activeClassName='router-active' to={'/home/a'}>AAA</NavLink>
</li>
</ul>
<div id='content'>
{/*
Switch 在多个匹配结果中,渲染第一个Route
Route 渲染的循序与书写顺序油感
1:看匹配;多个
2:先渲染辈分高的,同辈分,按照书写顺序加载
*/}
<Switch>
<Route path={'/about'} component={About} />
{/*
/home/a 匹配到 Home A
没有switch 两个都渲染
有 switch 只渲染Home
*/}
<Route path={'/home/a'} component={A} />
<Route path={'/home'} component={Home} />
</Switch>
</div>
</main>
</div>
)
}
8:Redirect 路由重定向。
# Redirict
> 作用:路由重定向
## 属性
- from 作用:监听url中path(默认模糊匹配),告诉Redirect 是否重定向。
- to 作用:重定向地址
- 类型 string|obj
- exact 精准匹配,约束from
## 触发条件
- 1:path没有匹配到Route
- 2: 满足from赋值匹配条件
- 3:必须在Route后面写。
example
~~~js
// 当url中patch没有匹配的Route,并且地址【必须是 /】 触发重定向
<Redirect exact from='/' to={'/home'}/>
// 当url中patch没有匹配的Route,并且地址【以 /aaa开头】, 触发重定向
<Redirect from='/aaa' to={'/about'}/>
// 不论什么地址,都没有渲染的Route
<Redirect to={'/404'} />
~~~
### 必须在Route后面写
- 1:path 匹配 Route 有渲染,
- 2:没有,看看有没有Redirect,是都满足触发条件
- 3:满足 触发Redirect --->更改url的path 地址-->匹配Route ---> 渲染Route
import React from 'react'
import './App.scss'
import { NavLink, Route, Switch, Redirect } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home';
import A from './pages/A';
import UrlErr from './pages/404'
export default function App() {
return (
<div>
<h1>App</h1>
<main>
<ul className='nav'>
<li>
<NavLink activeClassName='router-active' to={'/about'}>about</NavLink>
</li>
<li>
<NavLink activeClassName='router-active' to={'/home'}>home</NavLink>
</li>
<li>
<NavLink activeClassName='router-active' to={'/home/a'}>AAA</NavLink>
</li>
<li>
<NavLink activeClassName='router-active' to={'/dddd'}>404</NavLink>
</li>
<li>
<NavLink activeClassName='router-active' to={'/aaa'}>点我链接到其他地方</NavLink>
</li>
</ul>
<div id='content'>
{/*
Switch 在多个匹配结果中,渲染第一个Route
Route 渲染的循序与书写顺序油感
1:看匹配;多个
2:先渲染辈分高的,同辈分,按照书写顺序加载
*/}
<Switch>
<Route path={'/about'} component={About} />
{/*
/home/a 匹配到 Home A
没有switch 两个都渲染
有 switch 只渲染Home
*/}
<Route path={'/home/a'} component={A} />
<Route path={'/home'} component={Home} />
<Route path={'/404'} component={UrlErr} />
{/*
Redirect
应用:设置默认首页路由地址
*/}
<Redirect exact from='/' to={'/home'}/>
<Redirect from='/aaa' to={'/about'}/>
{/*
Redirect 路由重定向。
1:检测url中path是否可以匹配的Route
- 如果可以 不触发Redirect
- 没有匹配到,触发Redirect 更改url中path地址
- 重新匹配Route,渲染匹配到Route
注意:书写位置,可以在任意地方使用组件,有bug
建议放在最后一个Route下面
404 是兜底操作。
*/}
<Redirect to={'/404'} />
</Switch>
</div>
</main>
</div>
)
}
9:嵌套路由
# 嵌套路由
> 一级路由下面还有二级路由或者三级路由
## 思路
第一步:分析二级路由在哪个路由页面下?
第二步:当前页面的页面结构:
- 哪些是导航
- 哪些根据路由地址变化,动态展示内容。
第三步:根据页面分析,编写代码
- 在当前页面组件中,导入 `react-router-dom`
- 编写导航
- 注册页面组件 (将二级页面放在一级页面的路径下)
## 为什么在一级路由地址上编写二级路由地址?
example
> /home /home/info ---> why 不能写 /info
> 因为二级路由,必须要先加载一级路由渲染的组件,才能有再次匹配二级路由组件
/info
二级路由要想展示,必须先展示 home
要想展示 Home 浏览器地址必须是以/home开头
问:/info 能加载 Home ?
不能
Home 没渲染能展示二级路由吗?
不能
二级路由没展示,能匹配到子路由吗?
不能
10:params参数 -- 传参
import React from 'react'
export default function Item(props) {
console.log(props);
let {id,title} = props.match.params;
return (
<div>
<p>id: {id}</p>
<p>title:{title}</p>
</div>
)
}
~~~
params 参数样子
http://localhost:3000/home/info/1
http://localhost:3000/home/info/2
query 参数样子
http://localhost:3000/home/info?id=1
http://localhost:3000/home/info?id=2
~~~
ajax :
~~~
url
params
query
body
json
urlencode
xml
formData
...
~~~
## 参数
- params
- 参数结构 `/home/list/1`
- 1: 在`Route` 定义params参数的·`key`,语法`/hoem/list/:id/:title`
- 2:在`NavLink Link` 中给params参数`赋值` 语法 `/home/list/1/测试`
- 3:在渲染的`路由组件中` 通过 `props.match.params` 获取pramas参数
- serch
- state
11:search传参 --
import React from 'react'
export default function Item(props) {
console.log(props);
// parmas 参数
// let {id,title} = props.match.params;
// query参数
let query = props.location.search;
query = qs(query)
console.log(query);
let {id,title} = query;
return (
<div>
<p>id: {id}</p>
<p>title:{title}</p>
</div>
)
}
function qs(str){
let res = {};
str = str.slice(1);
let arr = str.split('&');
for(let i in arr){
let index = arr[i].indexOf('=');
let k = arr[i].slice(0,index);
let v = arr[i].slice(index+1);
res[k] = v
}
return res
}
## 参数
- params
- 参数结构 `/home/list/1`
- 1: 在`Route` 定义params参数的·`key`,语法`/hoem/list/:id/:title`
- 2:在`NavLink Link` 中给params参数`赋值` 语法 `/home/list/1/测试`
- 3:在渲染的`路由组件中` 通过 `props.match.params` 获取pramas参数
- searrch
- 结果 `/home/list?id=1&title=测试`
- 1: 在`NavLink Link` 中给params参数`赋值` 语法 `/home/list?id=1&title=测试`
- 2: 在渲染的`路由组件中` 通过 `props.location.search` 获取search,
- 3: 将参数字符变为对象,在渲染参数.
- state
12:state 传参 -
---------state传参
import React from 'react'
// queryString
export default function Item(props) {
console.log(props);
// parmas 参数
// let {id,title} = props.match.params;
// query参数
// let query = props.location.search;
// query = qs(query)
// console.log(query);
// let {id,title} = query;
// state
let {id,title} = props.location.state || {}
return (
<div>
<h1>list detal</h1>
<p>id: {id}</p>
<p>title:{title}</p>
</div>
)
}
// function qs(str){
// let res = {};
// str = str.slice(1);
// let arr = str.split('&');
// for(let i in arr){
// let index = arr[i].indexOf('=');
// let k = arr[i].slice(0,index);
// let v = arr[i].slice(index+1);
// res[k] = v
// }
// return res
// }
## 参数
- params
- 参数结构 `/home/list/1`
- 1: 在`Route` 定义params参数的·`key`,语法`/hoem/list/:id/:title`
- 2:在`NavLink Link` 中给params参数`赋值` 语法 `/home/list/1/测试`
- 3:在渲染的`路由组件中` 通过 `props.match.params` 获取pramas参数
- searrch
- 结果 `/home/list?id=1&title=测试`
- 1: 在`NavLink Link` 中给params参数`赋值` 语法 `/home/list?id=1&title=测试`
- 2: 在渲染的`路由组件中` 通过 `props.location.search` 获取search,
- 3: 将参数字符变为对象,在渲染参数.
- state
- 1: 在`NavLink Link` 中to`赋值` 对象 `{pathname,state}`
- 2: 在渲染的`路由组件中` 通过 `props.location.state` 获取state,
- 注意:在url中没有显示参数,他是利用浏览器中history location对象实现路由传参的
> 三个传参方式用哪个?
> - 1: 三种技术区别,各自优势,性能.
> 结论:除了写法不同,性能没有区别.用哪个无所谓.
13:编程式导航
import React from 'react'
import { NavLink, Route, Switch } from 'react-router-dom'
import Item from './Item'
export default function List(props) {
console.log(props);
let list = [
{
id: 1,
text: '列表一'
}, {
id: 2,
text: '列表二'
}, {
id: 3,
text: '列表三'
},
]
const linkAbout = ()=>{
// js 方式更改url中路由地址.
// 注意:历史浏览器记录用 栈(数组)数据结构保存
// 原理:相当于往历史浏览记录数组中 添加一个地址,可以返回上一页
props.history.push('/about')
// 原理: 相当于历史浏览记录,替换当前展示地址. 不能返回上一页
// props.history.replace('/about')
}
const toParams =(path)=>{
props.history.push(path)
}
const toSearch =(path)=>{
props.history.push(path)
}
const toState =(path,state)=>{
props.history.push(path,state)
}
return (
<div className='List'>
<ul>
{
list.map(item => {
return (
<li key={item.id}>
{/* parms 参数 */}
{/* <NavLink to={`/home/list/${item.id}/${item.text}`}>{item.text}</NavLink> */}
{/* search */}
{/* <NavLink to={`/home/list?id=${item.id}&title=${item.text}`}>{item.text}</NavLink> */}
{/*
pathname 更改url中路由地址是什么
state 传递state参数
*/}
<NavLink to={{ pathname: '/home/list', state: { id: item.id, title: item.text } }}>{item.text}</NavLink>
<button onClick={()=>toParams('/home/list/'+item.id+'/'+item.text)}>paranms</button>
<button onClick={()=>toSearch(`/home/list?id=${item.id}&title=${item.text}`)}>search</button>
<button onClick={()=>toState('/home/list',{id:item.id,title:item.text})}>state</button>
</li>
)
})
}
<li>
<button onClick={()=>{linkAbout()}}>点击按钮更改地址为 /about</button>
</li>
</ul>
<div>
<Switch>
{/* params参数怒 */}
{/* <Route path={'/home/list/:id/:title'} component={Item}></Route> */}
{/* <Route path={'/home/list'} component={Item}></Route> */}
<Route path={'/home/list'} component={Item}></Route>
</Switch>
</div>
</div>
)
}
import React from 'react'
// queryString
export default function Item(props) {
console.log(props);
// parmas 参数
// let {id,title} = props.match.params;
// query参数
// let query = props.location.search;
// query = qs(query)
// console.log(query);
// let {id,title} = query;
// state
let {id,title} = props.location.state || {}
return (
<div>
<h1>list detal</h1>
<p>id: {id}</p>
<p>title:{title}</p>
</div>
)
}
// function qs(str){
// let res = {};
// str = str.slice(1);
// let arr = str.split('&');
// for(let i in arr){
// let index = arr[i].indexOf('=');
// let k = arr[i].slice(0,index);
// let v = arr[i].slice(index+1);
// res[k] = v
// }
// return res
// }
## 编程式导航 > 在js代码中如何使用 api 修改url,或者跳湖在哪. - props.history.push(path,state); - props.history.replace(path,state); 历史浏览记录:底层式用数组保存的,每次变更url,默认都是给数组添一个地址 - push新增历史记录 - replace 替换url地址,历史记录数组长度不变化的 传参 ~~~js // params props.history.push('/home/list/1'); // search props.history.push('/home/list?id=1'); //state props.history.push('/home/list',{id:1}); ~~~
14:witchRouter
import React from 'react'
import { NavLink, Route, Switch } from 'react-router-dom'
import Item from './Item'
export default function List(props) {
console.log(props);
let list = [
{
id: 1,
text: '列表一'
}, {
id: 2,
text: '列表二'
}, {
id: 3,
text: '列表三'
},
]
const linkAbout = ()=>{
// js 方式更改url中路由地址.
// 注意:历史浏览器记录用 栈(数组)数据结构保存
// 原理:相当于往历史浏览记录数组中 添加一个地址,可以返回上一页
props.history.push('/about')
// 原理: 相当于历史浏览记录,替换当前展示地址. 不能返回上一页
// props.history.replace('/about')
}
const toParams =(path)=>{
props.history.push(path)
}
const toSearch =(path)=>{
props.history.push(path)
}
const toState =(path,state)=>{
props.history.push(path,state)
}
return (
<div className='List'>
<ul>
{
list.map(item => {
return (
<li key={item.id}>
{/* parms 参数 */}
{/* <NavLink to={`/home/list/${item.id}/${item.text}`}>{item.text}</NavLink> */}
{/* search */}
{/* <NavLink to={`/home/list?id=${item.id}&title=${item.text}`}>{item.text}</NavLink> */}
{/*
pathname 更改url中路由地址是什么
state 传递state参数
*/}
<NavLink to={{ pathname: '/home/list', state: { id: item.id, title: item.text } }}>{item.text}</NavLink>
<button onClick={()=>toParams('/home/list/'+item.id+'/'+item.text)}>paranms</button>
<button onClick={()=>toSearch(`/home/list?id=${item.id}&title=${item.text}`)}>search</button>
<button onClick={()=>toState('/home/list',{id:item.id,title:item.text})}>state</button>
</li>
)
})
}
<li>
<button onClick={()=>{linkAbout()}}>点击按钮更改地址为 /about</button>
</li>
</ul>
<div>
<Switch>
{/* params参数怒 */}
{/* <Route path={'/home/list/:id/:title'} component={Item}></Route> */}
{/* <Route path={'/home/list'} component={Item}></Route> */}
<Route path={'/home/list'} component={Item}></Route>
</Switch>
</div>
</div>
)
}
import React from 'react'
// queryString
export default function Item(props) {
console.log(props);
// parmas 参数
// let {id,title} = props.match.params;
// query参数
// let query = props.location.search;
// query = qs(query)
// console.log(query);
// let {id,title} = query;
// state
let {id,title} = props.location.state || {}
return (
<div>
<h1>list detal</h1>
<p>id: {id}</p>
<p>title:{title}</p>
</div>
)
}
// function qs(str){
// let res = {};
// str = str.slice(1);
// let arr = str.split('&');
// for(let i in arr){
// let index = arr[i].indexOf('=');
// let k = arr[i].slice(0,index);
// let v = arr[i].slice(index+1);
// res[k] = v
// }
// return res
// }
# withRouter
> 作用:让非路由组件可以实现路由跳转,给普通传入路由的props
> 是:高阶函数
~~~js
import { withRouter } from 'react-router-dom'
function Head(props) {
const back = ()=>{
props.history.go(-1)
}
return (
<div>
<h1>App</h1>
<button onClick={()=>{back()}}>返回</button>
</div>
)
}
export default withRouter(Head)
~~~
路由总结
# react-router-notes
## react路由只做两件事
- 1:更改url中路由地址path
- 2:注册路由组件,根据path,匹配注册路由组件,并渲染到页面上
使用的注意事项
- 1: 将路由组件作为 <Router /> 的子组件
- 2: <Router> 又有
- <BrowserRouter> 为history模式的路由
- <HashRouter> 为hash模式的组件
## 路由开发基本思路是什么?
- 1:确定页面导航部分。作用:更改路由地址变化 `path`
> <Link /> 编写导航
- 2: 展示区域展示的内容。
> path 匹配大的路由组件。
> <Route /> 注册路由组件。
- 3:<APP /> 外围需要包裹 <BrowserRouter /> 或者 < HashRouter/>
bug:
- 当url中path地址与注册路由组件path不一致,问 **该路由组件是否会展示?**
- **当一个页面,预期需要展示的内容没有展示?你应该如何排错?**
- 1:一看 url 中 `path`
- 2:二看 Route 中 `path` 是否与url一致
- 3:三看 Route 中 `component`注册组件是不是不对
## 路由组件和一般组件区别
1.写法不同:
- 普通组件:<component />
- 路由组件:<Route path="" component={component} />
2.开发者规范中,存放路径不同
- 普通组件:components/xxx
- 路由组件:pages/xxx
3.找bug方式不同:
- 普通组件:
- 1:导入组件路径对不对
- 2:介绍践变量名字单词是否大写
- 路由组件:
- 1: 看url中路由地址
- 2: 看注册的path与 url的路由地址是否一致
- 3: 看component属性注册的组件对不对
4.props接收的值不同:
- 普通组件: 自定义属性传值
- 路由组件: 注册并渲染会自动传值
- history
- location
- match
- 记录路由地址详情详细,或者提供修改路由地址方法
## NavLink和封装MyNavLink
## 路由导航高亮显示
>被激活的会有class 类名
>被激活的路由,指的是当前选中或者式匹配到的路由。
>默认:模糊匹配,可以陪陪到一个或者多个NavLink
- 1:通过`NavLink`中`activeClass`属性更改class类名
- 2:给 class 设置高亮样式
## 路由匹配:严or模糊
{/* /Home/* */}
<li><NavLink activeClassName='router-active' to="/Home/a/b">ABC</NavLink></li>
<li><NavLink activeClassName='router-active' to="/a/Home/b">ABC</NavLink></li>
## 路由样式丢失问题提
## 嵌套路由
## 路由传参
### - params
### - search
### - state
## 路由跳转
## 编程式导航
## 普通组件如何实现路由跳转
未写完:我会很块更新完