前端新手村React入门进阶篇之React-route!!!!

前言

在上一篇文章中,有介绍react的基本使用,那么在本文中将会为大家介绍react-route的使用.学习过vue-route的大家伙都知道,vue-route它使用起来是比较方便的,我们在一个数组里面，配好一个一个页面的路由即可.那么react-route究竟该如何使用呢？话不多说,正片开始!

React-route基本使用

首先我们得有个react项目吧,我们可以使用npm create vite@latest 项目名称 -- --template react来快速创建一个react的项目.进入App.jsx文件,清空内容.直接使用快捷方式rfc写好模版,使用这个快捷方式的话大家可以在扩展中下载,对没错,就是第二个.

然后在终端安装react-route,使用npm install react-router-dom@6安装就好了.

那么在react中我们使用什么去开启路由配置,或者说是使用什么作为路由入口呢.在react中有两种路由入口,一种叫做浏览器路由BrowserRouter，另一种是哈希路由HashRouter.这两种都是从react-router-dom中引入的.

设置路由的出口那么就是要用到Routes,而配置项的话就是要用到Route配置path和组件的映射关系.其次还有一个路由跳转就是用Link.那么我们现在开始上代码.

首先我们在src下创建文件夹view在这里我们创建了两个页面用于路由跳转

现在我们就需要在App.jsx中开始配置路由了.第一步就是'路由，启动！！！！',我们需要注意的是路由配置项需要被包裹在BrowserRouter里面,Link接属性to需要对应到我们在路由配置Route中里面写好的path路径.相较于vue-route的配置需要写对应页面的完整路径,react-route则是将页面当成组件引入展示.在Route中的属性element的值就是对应的组件.

javascript 复制代码

import React from 'react'
import Home from './views/Home'
import About from './views/About'
import {HashRouter,BrowserRouter, Routes,Route,Link} from 'react-router-dom'

export default function App() {
  return (
    <div>
        <h2>App</h2>
        <BrowserRouter>
            <Link to='/home'>首页</Link> |
            <Link to='/about'>关于</Link>
            <Routes>
                <Route path='/home' element={<Home></Home>}></Route>
                <Route path='/about' element={<About></About>}></Route>
            </Routes>
        </BrowserRouter>
    </div>
  )
}

我们提到两种路由BrowserRouter,HashRouter它们的区别在于前者的url地址栏不会有#而后者有.

现在如果我想从Home跳转到About又该如何操作呢?在vue-route中我们可以使用route.push(),那么在react中我们则需要借助编程式导航useNavigate帮我们实现.我们也是从react-router-dom引入useNavigate,对于useNavigate我们需要创建一个变量用于接收useNavigate返回的值

ini 复制代码

    const navigate = useNavigate()

然后创建一个按钮触发点击事件跳转页面,navigate()直接写我们需要跳转页面的路径就好了.

ini 复制代码

<button onClick={()=>navigate('/about',{replace:true})}>go about</button>

在navigate()可以写第二个参数{replace:true}启动这个参数的话,那么我们从路径home跳转到about页面.在浏览器中会有两条记录一个是起始home，然后是about,我们启用后about就会覆盖home这条记录.

那么路由跳转是如何传值的呢？这里有两种方式一种是直接用个问号接值就好了. navigate('/about?id=123') 如果这样传值的话我们在About.jsx我们使用useSearchParams这个hook函数.使用useSearchParams就需要我们解构出useSearchParams的返回值let [params] = useSearchParams()看看这个返回值长什么样子

获取这个值就很简单了，直接params.get('id').

另一种传值方式就直接在路由跳转路径后面接参数navigate('/about/132')那么使用这种方法我们需要在路由配置里提前写好

xml 复制代码

<Route path='/about/:id' element={<About></About>}></Route>

然后在About.jsx中引入useParams,使用useParams和useNavigate一样,我们需要创建变量let params = useParams(),打印params里面包含我们传的值.

React二级路由

我们了React-route的使用,那么二级路由又是如何实现的呢？不同于vue中二级路由依旧直接写在数组里.react中则是有一个二级路由出口Outlet.

这里写了这样一个案例，左边是菜单栏,点击不同的选项，右边可以展示不同的内容.

css 复制代码

import React from 'react'
import { Link, Outlet } from 'react-router-dom'

export default function Layout() {
  return (
    <div style={{height:'100vh'}}>
        <div className="header" style={{height:'60px',background:'#aaa'}}>
            header
        </div>
        <div className="container" style={{display:'flex',height:'100vh'}}>
            {/* 左侧菜单 */}
        <div className="menu" style={{width:'200px',background:'#eee'}}>
            <div>
                <Link to='/'>掘金</Link>
            </div>
            <div>
                <Link to='/leetcode'>力扣</Link>
            </div>
        </div>
        {/* 右侧内容 */}
        <div className="content" style={{flex:'1'}}>
            <Outlet>

            </Outlet>
        </div>
        </div>
    </div>
  )
}

在内容部分我们写了二级路由的出口Outlet,那么我们如何配置这个路由.其实也很简单直接在一级路由下继续嵌套.

xml 复制代码

<Route path='/' element={<Layout></Layout>} > */}
     <Route index element={<Juejin></Juejin>}></Route>
     <Route path='/leetcode' element={<Leetcode></Leetcode>}></Route>
</Route>

这里我们给 <Route index element={<Juejin></Juejin>}></Route>添加了一个index,表示默认加载让我们来到根路径下会加载<Juejin></Juejin>.

封装路由配置.

在写项目时,我们会需要多个路由.如果所有的路由都是写在App.jsx里面的话,就会显得很'臃肿'，所以我们把路由配置项拎出来写.

javascript 复制代码

import React from 'react'
import {useRoutes} from 'react-router-dom'
import Layout from '../pages/Layout'
import Juejin from '../pages/Juejin'
import Leetcode from '../pages/Leetcode'

const routes = [
    {
        path:'/',
        element:<Layout />,
        children:[
            {
                path:'/',
                index:true,
                element:<Juejin />
            },
            {
                path:'/leetcode',
                element:<Leetcode />
            }
        ]
    }
]

function WrapperRoutes(){
    let element = useRoutes(routes)
    return element
}

export default WrapperRoutes

这里核心内容是useRoutes会将我们的路由数组转化成组件.但是路由路组的格式是有要求的，需要按照一定格式进行书写.将组件WrapperRoutes抛出,在App.jsx引入就好了.

本文到这里也就结束了,希望对大家有所帮助,谢谢大家阅读！！