“Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。”
今天在做项目的时候发现原来学的路由更新了，修改了很多原来的写法，现在记录一下，方便自己以后使用查看。
由于自己做的是web所以使用的是react-router-dom
第一步当然是安装依赖
npm i react-router-dom
开始使用路由
原来的写法
import About from './About'
import Home from './Home'
<BrowserRouter>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
</BrowserRouter>
6.0后的写法
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import About from './About';
import Home from './Home';
function App(){
return (
<BrowserRouter>
<Routes>
<Route path='/Hone' element={<Home/>} />
<Route path='/About' element={<About/>} />
</Routes>
</BrowserRouter>
)
}
路由跳转这里是没有改变的
Link
import { Link } from 'react-router-dom';
<Link to='About'>About</Link>
NavLink
import { NavLink } from 'react-router-dom';
function Foo(){
return (
<NavLink
style={ (isActive) => ({color: isActive ? 'red' : 'white'}) }
>to Home</NavLink>
)
}
NavLink组件和Link组件的功能是一致的，区别在于Navlink可以判断其to属性是否是当前匹配到的路由NavLink组件的style或className可以接收一个函数，函数接收一个isActive参数，可根据该参数调整样式- 在书写路由的路径时，
/开头的是绝对路径，否则就是相对路径！
编程式路由
有时候我们不一定html中进行路由的跳转，如需要在js中进行路由的跳转，那么这个时候就需要编程式路由
原来的写法：
this.props.history.push(`/home`);
this.props.history.goBack()
this.props.history.goForward()
this.props.history.go(-2)
被用为路由组件的每个组件都会新增一些props通过这些来进行跳转。
6.0之后
import { useNavigate } from 'react-router-dom';
function About(){
const navigate = useNavigate();
return (
<div onClick={() => navigate('/about')}>跳转</div>
)
}
使用useNavigate钩子函数生成navigate对象，可以通过JS代码完成路由跳转
可以发现也是在向着hook靠。
路由传参
原来的写法
1.params参数
路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
接收参数：this.props.match.params
2.search参数
路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
接收参数：this.props.location.search
备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
3.state参数
路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
接收参数：this.props.location.state
备注：刷新也可以保留住参数
6.0以后的写法
//params参数
<BrowserRouter>
<Routes>
<Route path='/about/:id' element={About} />
</Routes>
</BrowserRouter>
import { useParams } from 'react-router-dom';
export default function Foo(){
const params = useParams();
return (
<div>
<h1>{params.id}</h1>
</div>
)
}
//search参数
import { useSearchParams } from 'react-router-dom';
// 当前路径为 /about?id=12
function Foo(){
const [searchParams, setSearchParams] = useSearchParams();
console.log(searchParams.get('id')) // 12
setSearchParams({
name: 'about'
})
// /foo?name=foo
return (
<div>about</div>
)
}
//
由于在类组件中不能使用hook，所以对于类组件我们可以借助高阶组件把参数以prop的形式传入。
嵌套路由
原来的写法
//1.注册子路由时要写上父路由的path值
//2.路由的匹配是按照注册路由的顺序进行的
在子组件中写上对应的路由规则即可。
6.0以后的写法
<Routes>
<Route path="/" element={<Home/>} ></Route>
<Route path="/index" element={<Index/>} >
<Route path='message' element={<Message/>}></Route>
</Route>
</Routes>
直接嵌套着写即可，更加的直观了。
import {Outlet} from 'react-router-dom';
function Index(){
return (
<div>
// 自己组件的内容
// 留给子组件message的占位
<Outlet />
</div>
)
}
默认路由
原来的写法
原来我们通过`Redirect`来实现默认路由的写法。
6.0以后的写法
<Routes>
<Route path='/about' element={About}>
<Route index element={Home}></Route>
<Route path='message' element={Message}></Route>
</Route>
</Routes>
当然我们也可以通过重定向的方式来实现
import { Navigate } from 'react-router-dom';
function Home(){
return (
<Navigate to="/about" />
)
}
组件没有path而是index则是默认路由,在嵌套路由中，如果URL仅匹配了父级URL，则Outlet中会显示带有index属性的路由
全路由匹配
<Routes>
<Route path='/foo' element={<Foo/>}>
<Route path='bar' element={<Bar/>}></Route>
<Route path='*' element={<NotFound/>}></Route>
</Route>
</Routes>
path属性取值为*时，可以匹配任何（非空）路径，同时该匹配拥有最低的优先级。可以用于设置404页面。
其他
针对类组件的withRouter高阶组件已被移除。
//withRouter可以加工一般组件，让一般组件具备路由组件所特有的API
//withRouter的返回值是一个新组件
