概述
Router
react-router中提供了多种Router,用来包裹整个应用。
-
在 Web 浏览器中运行时应使用 <BrowserRouter> 或 <HashRouter>
Routing
路由是决定哪些 React 元素将被呈现. React Router 提供了两个接口来声明你的路由。
-
<Routes> 和 <Route> 用于 JSX
-
useRoutes 用于 JavaScript 对象的配置
Navagation
-
<Link> 和 <NavLink> 在 React 应用上呈现可访问的 <a> 元素或 TouchableHighlight。这让用户可以通过单击或点击页面上的元素来启动导航。
-
useNavigate 和 <Navigate> 用以编程方式导航,通常在事件处理程序中或响应某些状态变化
Params
-
useSearchParams 用于访问url中的查询字符串
-
useParams 用于获取路由参数
-
useLocation 用来获取组件跳转时传递的state数据
Component(API)
BrowserRouter
<BrowserRouter> 用于包裹整个应用。
import * as React from "react"; import * as ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; ReactDOM.render( <BrowserRouter> {/* The rest of your app goes here */} </BrowserRouter>, root );
HashRouter
作用与BrowserRouter一样,但是修改的是地址栏的hash值.官方不推荐使用
Routes和Route
<Routes> 和 <Route> 用于在 React Router 中渲染视图。你可以把 <Route> 想象成一个 if 语句;如果其路径与当前 URL 匹配,则呈现其视图 。
每当位置发生变化时,<Routes> 都会查看其所有子 <Route> 元素以找到最佳匹配并呈现 UI 。 <Route> 元素可以嵌套以指示嵌套的 UI,这也对应于嵌套的 URL 路径。父路由通过渲染一个 <Outlet> 来渲染它们的子路由
<Routes> // path属性用于定义路径 // element属性用于定义当前路径所对应的组件 <Route path="/login" element={<Login />}></Route> // 用于定义嵌套路由 // home就是一级路由 对应的路径/home <Route path="home" element={<Home />}> // test 和 test2 就是二级路由 对应的路径是/home/test 或 /home/test2 <Route path="test" element={<Test />}></Route> <Route path="test2" element={<Test2 />}></Route> </Route> // Route也可以不写element属性, 这时就是用于展示嵌套的路由 .所对应的路径是/users/xxx <Route path="users"> <Route path="xxx" element={<Demo />} /> </Route> </Routes>
Link
作用: 修改浏览器的地址栏地址,并且不发送请求(最终渲染的是a标签)
注意: 需要被Router包裹
import { Link } from "react-router-dom"; function Test() { return ( <div> <Link to="/路径">点击</Link> </div> ); }
NavLink
作用: 与Link组件类似,可以快速实现导航Highlight
// 注意: 默认类名是active, 下面是自定义的style和类名 <NavLink to="login" style={({ isActive }) => { console.log('login', isActive) return isActive ? activeStyle : undefined }}> login </NavLink> <NavLink to="home" className={({ isActive }) => { console.log('home', isActive) return isActive ? 'base one' : 'base' }}> home </NavLink> // 注意: 默认,当Home的子组件匹配成功,Home的导航也会高亮.当NavLink上添加了end属性,则Home的子组件匹配成功的时候,Home的导航没有高亮效果 <NavLink to="home" end > home </NavLink>
Navigate
只要Navigate组件被解析,就会修改路径,切换视图
相当于useNavigate
import * as React from 'react' import { Navigate } from 'react-router-dom' export default class Test extends React.Component { state = { isNav: false } render() { let { isNav } = this.state return ( <div> <h1>test组件</h1> {isNav && <Navigate to="/login" replace={true}/>} <button onClick={() => { this.setState({ isNav: true }) }} > 按钮 </button> </div> ) } }
Outlet
用于处理嵌套路由
// - App.js <Routes> <Route path="/home" element={<Home />}> <Route path="/home/test" element={<Test />}></Route> <Route path="/home/test2" element={<Test2 />}></Route> </Route> <Route path="/login" element={<Login />}></Route> </Routes> // - Home.js export default function Home(props) { return ( <div> <h1>首页</h1> <NavLink to="/home/test">test</NavLink> <NavLink to="/home/test2">test2</NavLink> <hr /> // test和test2组件会渲染在Outlet的位置上 <Outlet></Outlet> </div> ) }
Hooks(API)
useNavigate
返回一个函数用来编程式导航
export default function Test2() { const navigate = useNavigate() const handle = () => { navigate('/login/9/99?name=zs&age=18', { replace: false, state: { a: 1, b: 2 }, }) 或 navigate(-1) //类似于history.go()方法 } return ( <div> <h1>test2</h1> <button onClick={handle}>按钮</button> </div> ) }
useParams
useParams 钩子返回当前匹配路由的路由参数
子路由继承父路由的所有参数
import * as React from 'react'; import { Routes, Route, useParams } from 'react-router-dom'; function ProfilePage() { // Get the userId param from the URL. let { userId,id } = useParams(); // ... } function App() { return ( <Routes> // 注意: v6版本中,只要配置了路由参数就必须传递,否则无法匹配.而且?也是无效的 <Route path="users/:id"> <Route path=":userId" element={<ProfilePage />} /> </Route> </Routes> ); }
useLocation
获取location信息
export default function Login() { const location = useLocation() console.log(location) return <div>login</div> } // location对象: { hash: "", key: "ah9nv6sz", pathname: "/login", search: "?name=zs&age=18", state: {a: 1, b: 2} }
useSearchParams
useSearchParams 钩子用于读取和修改当前位置的 URL 中的查询字符串。与 React 自己的 useState 钩子一样,useSearchParams 返回一个包含两个值的数组:当前位置的搜索参数和一个可用于更新它们的函数
export default function Login() { const [query, setQuery] = useSearchParams() // 注意: query是一个formdata对象 console.log('login', query.get('name')) function handle() { // 可以修改当前路径的查询字符串 setQuery('x=12&y=34') } return ( <div> <h1>login</h1> <button onClick={handle}>按钮</button> </div> ) }
useRoutes
用于根据路由表,动态创建Routes和Route
//element就是写好的Routes和Route const element = useRoutes([ { path: '/', element: <Home />, children: [ { path: 'test', element: <Test /> }, { path: 'test2', element: <Test2 /> }, ], }, { path: '/login/:page/:pageSize', element: <Login />, }, { path: 'users/:id', children: [ { path: ':xxx', element: <Demo />, }, ], }, ])