目录
v6和v5的区别
<Switch>变为<Routes>。
<Route>的新特性变更。
嵌套路由变得更简单。
useNavigata代替useHistory。
新钩子useRoutes代替react-router-config。
大小减少。
路由的安装
npm i react-router-dom
基本使用
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
//引入要跳转的组件
import 组件名 from '路由地址';
<在路由外的组件或内容,这个内容就会一直显示/>
<Routes>
<Route path='/地址' element={ <组件名 />}>
{/* 这里使用的是默认index */}
<Route index element={<组件名 />}></Route>
<Route path='地址' element={<组件名 />} /> // 子路由
</Route>
</Routes>
连接有两种Link和NavLink ,之间的不同是NavLink可以通过isActive来控制导航的活跃状态,这里的isActive不用赋值。
<NavLink className={({ isActive }) => isActive ? 'selected' : ''} to='page'><div>首页</div></NavLink>
<Link to='/'><div id='zhuxiao'>注销</div></Link>
子路由显示位置:父组件由对应的组件里, Outlet 标签,放在你想显示 的位置上。
<Outlet />
路由传参
useParams
import { useParams } from 'react-router-dom';
<Route path='/productdetils/:num' element={<ProductDetils />}></Route>
<Link to={`/productdetils/${item.num}`}>{item.num}</Link>
export default function ProductDetils() {
let params = useParams();
console.log(params);
return (
<div><h1>ProductDetils</h1></div>
)
}
useSearchParams
<Route path='/productdetils' element={<ProductDetils />}></Route>
<Link to={`/productdetils?num=${item.num}`}>{item.num}</Link>
import { useParams, useSearchParams } from 'react-router-dom';
const [searchParams, setSearchParams] = useSearchParams();
console.log('searchParams', searchParams.get('num'));
useLocation
获取路径相关的信息使用useLocation。
useNavigate
用useNavigate代替v5的useHistory。
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
function goBacke() {
// navigate('/nowhome/page');//有历史记录
// navigate(-2)
navigate('/nowhome/page', { replace: true })//没有跳转过来那一页的记录
}
return (
<div>
<h1>ProductDetils</h1>
<button onClick={goBacke}>返回</button>
</div>
)
useRoutes
声明式创建路由
export default function HandleRoutes() {
let element = useRoutes([
{
path: "/",
element: <Home />
}, {
path: "/productdetils",
element: <ProductDetils />
},
{
path: "/nowhome",
element: <NowHome />,
children: [
{
index: true,//这里设置了默认显示子路由
element: <Page />
},
{
path: "page",
element: <Page />,
index: true
},
{
path: "page",
element: <Page />
}, {
path: "product",
element: <Product />
}, {
path: "bound",
element: <Bound />
}, {
path: "about",
element: <About />,
children: [
{
index: true,
element: <NowPlan />
},
{
path: "nowplan",
element: <NowPlan />
}, {
path: "uscontent",
element: <UsContent />
}, {
path: "jionus",
element: <JionUs />
},
]
}, {
path: "concat",
element: <Concat />
}
]
},
{
path: '*',
element: <div>Not Fond 404</div>
}
]);
return element;
}
import HandleRoutes from './HandleRoutes';
function App() {
return (
<div className="App">
<Router>
<HandleRoutes></HandleRoutes>
</Router>
</div>
);
}