react router v6 版本的路由实现
喜爱就点赞呗
装置
pnpm add react-router-dom残缺代码
# App.tsxfunction App() { return ( <div className="App"> <nav style={{ margin: 10 }}> <Link to="/" style={{ padding: 5 }}> Home </Link> <Link to="/about" style={{ padding: 5 }}> About </Link> <Link to="/list" style={{ padding: 5 }}> About </Link> </nav> <Routes> <Route path="/" element={<Home txt="2333" />}></Route> <Route path="about" element={<About />}></Route> <Route path="*" element={<NoMatch />} /> <Route path="list" element={<List />}> <Route path="/list" element={<ListLink />}></Route> <Route path=":id" element={<ListId />}></Route> </Route> </Routes> 。 </div> );}Api
| 办法 | 意义 |
|---|---|
| useParams | 返回以后参数 依据门路读取参数 |
| useNavigate | 返回以后路由 代替原有V5中的 useHistory |
| useOutlet | 返回依据路由生成的element |
| useLocation | 返回以后的location 对象 |
| useRoutes | 同Routers组件一样，只不过是在js中应用 |
| useSearchParams | 用来匹配URL中?前面的搜寻参数 |
根本路由实现
其中Home, 和About的代码就不进行展现了
<Route path="/" element={<Home />}></Route><Route path="about" element={<About />}></Route>则是定义路由
| 地址 | 组件 |
|---|---|
| localhost:3000/ | Home组件 |
| localhost:3000/about | About组件 |
不过这些很快就能分分明, 不过须要深刻理解的是嵌套路由
上面的代码次要也是list为主
404路由
<Route path="*" element={<NoMatch />} />当Routes中寻找不到的时候, 咱们在最初一个路由中增加正则就能够指定404了
重定向
应用导航组件重定向
咱们能够通过应用 React Router 的 Navigate 组件来执行申明性重定向。在上面的示例中，每当用户导航到"对于"页时，导航组件都将以申明形式执行重定向：
const About = () => { const shouldRedirect = true; return ( <> <h2>About</h2> {shouldRedirect && <Navigate replace to="/home" />} </> );};如果咱们想在路由级别对此进行治理，咱们也能够应用以下代替解决方案：
# App.tsx<Route path="about" element={ shouldRedirect ? ( <Navigate replace to="/home" /> ) : ( <About /> ) }/>应用重定向导航钩子
const About = () => { const shouldRedirect = true; const navigate = useNavigate(); React.useEffect(() => { if (shouldRedirect) { navigate('/home'); } }); return ( <> <h2>About</h2> </> );};每当组件出现时，React 的 useEffect Hook 都会运行，并将以编程形式执行重定向。
嵌套路由(list)的实现
<Route path="list" element={<List />}> <Route path="/list" element={<ListLink />}></Route> <Route path=":id" element={<ListId />}></Route></Route>上方代码次要组成是这样的,
当咱们拜访http://localhost:3000/list<List> <ListLink></ListLink></List>当咱们拜访http://localhost:3000/list/1<List> <ListId /></List>残缺代码
List.tsx
Outlet 嵌套路由相似 {children}
import { Outlet } from 'react-router-dom';class List extends React.Component { constructor(props: React.FC) { super(props); } render() { return ( <div style={{ padding: 20 }}> <h2>Blog</h2> <Outlet /> </div> ); }}ListLink.tsx
const lists = { "1": { title: "第一篇文章", desc: "test1", }, "2": { title: "第二篇文章", desc: "test2", },};class ListLink extends React.Component { constructor(props: React.FC) { super(props); } render() { return ( <ul> {Object.entries(lists).map(([key, { title }]) => ( <li key={key}> <Link to={`/list/${key}`}> <h3>{title}</h3> </Link> </li> ))} </ul> ); }}ListId.tsx
useParams 获取路由参数
export default function ListId() { const lists: Record< string, { title: string; description: string; } > = { "1": { title: "第一篇博客文章", description: "第一篇博客文章，是对于Vue3.0的", }, "2": { title: "第二篇博客文章", description: "Hello React Router v6", }, }; const { id } = useParams(); const blog = lists[id as string]; const { title, description } = blog; return ( <div style={{ padding: 20 }}> <h3>{title}</h3> <p>{description}</p> </div> );}路由对立治理及路由拦挡计划
这篇文章曾经写的很好了, 就不反复阐明了
react-router v6 路由对立治理及路由拦挡计划
参考
React Router v6 使用指南
React Router 6: Redirect