React-Router的安装方法:
npm: $ npm install react-router-dom@6
yarn$ yarn add react-router-dom@6
目前官方从5开始已经放弃原有的react-router库,统一命名为react-router-dom复制代码
使用方法
React-Router本身在React开发中就是一个组件,因此在使用时基本遵循组件开发相关原则。这里采用create-react-app来创建一个基础的demo工程演示使用过程。复制代码
create-react-app my-first-react
安装react-router组件<Routers>
一组路由代替原有<Switch>
,所有子路由都用基础的Router children来表示<Router>
基础路由Router是可以嵌套的,解决原有V5中严格模式,后面与V5区别会详细介绍<Link>
导航组件在实际页面中跳转使用<Outlet/>
自适应渲染组件根据实际路由url自动选择组件
hooks名作用说明useParams
返回当前参数根据路径读取参数useNavigate
返回当前路由代替原有V5中的 useHistoryuseOutlet
返回根据路由生成的elementuseLocation
返回当前的location 对象useRoutes
同Routers组件一样,只不过是在js中使用useSearchParams
用来匹配URL中?后面的搜索参数基础使用示例
App.js
这里创建了两个组件Home和About,然后分别注册/和about,在每个页面还有Link来进行导航复制代码
import './App.css';import { Routes, Route, Link } from "react-router-dom"function App() { return ( <div className="App"> <header className="App-header"> <Routes> <Route path="/" element={<Home />}></Route> <Route path="/about" element={<About />}></Route> </Routes> </header> </div> );}function Home() { return <div> <main> <h2>Welcome to the homepage</h2> </main> <nav> <Link to="/about">about</Link> </nav> </div>}function About() { return <div> <main> <h2>Welcome to the about page</h2> </main> <nav> <ol> <Link to="/">home</Link> <Link to="/about">about</Link> </ol> </nav> </div>}export default App; 复制代码
运行后
至此,一个最简单的路由demo就正常运行了。
<Outlet/>
来直接实现,如下所示
function App() { return ( <Routes> <Route path="user" element={<Users />}> <Route path=":id" element={<UserDetail />} /> <Route path="create" element={<NewUser />} /> </Route> </Routes> );}function Users() { return ( <div> <h1>Users</h1> <Outlet /> </div> );}复制代码<Outlet/>
会默认渲染About组件*
只能用在/后面,不能用在实际路径中间
关于NotFound类路由,可以用*
来代替
function App() { return ( <Routes> <Route path="/" element={<Home />} /> <Route path="dashboard" element={<Dashboard />} /> <Route path="*" element={<NotFound />} /> </Routes> );}复制代码let [searchParams, setSearchParams] = useSearchParams();
使用时可以用searchParams.get("id")
来获取参数,同时页面内也可以setSearchParams({"id":2})来改变路由,这样当访问 http://URL/user?id=111时就可以获取和设置路径1.用<Routes> children形式
替代<Switch>
V5写法:
function App() { return ( <Switch> <Route exact path="/"> <Home /> </Route> <Route path="/about"> <About /> </Route> <Route path="/users/:id" children={<User />} /> </Switch> ); }复制代码
V6写法
function App() { return ( <Routes> <Route index path="/" element={<Home />} /> <Route path="about" element={<About />} /> <Route path="/users/:id" element={<User />} /> </Routes> ); }复制代码
2.去除Switch中的<Redirect>
,用react-router-dom中的Redirect 替代,或者用 <Navigate>
实现
V5写法:
<Switch> <Redirect from="about" to="about-us" /> </Switch>复制代码
V6写法:
<Route path="about" render={() => <Redirect to="about-us" />}复制代码
3.<Link to>
支持相对位置
V5版本的to属性只支持绝对位置,如<Lint to="me">
表示<Lint to="/me">
,如果当时正在Users组件内,想跳转需要<Lint to="/users/me">
。在V6中,Link默认支持相对位置,也就是<Lint to="me">
在Users组件内会等价于<Lint to="/users/me">
,同时支持'..' 和'.'等相对路径写法。
// If your routes look like this<Route path="app"><Route path="dashboard"> <Route path="stats" /></Route></Route> // and the current URL is /app/dashboard (with or without// a trailing slash)<Link to="stats"> => <a href="/app/dashboard/stats"><Link to="../stats"> => <a href="/app/stats"><Link to="../../stats"> => <a href="/stats"><Link to="../../../stats"> => <a href="/stats">复制代码
4.使用useNavigate代替useHistory
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。