react入门--React-Router路由

目录

一、项目环境

二、基础使用

三、路由核心内置组件说明

---

一、项目环境

# 创建react项目
$ yarn create vite react-router --template react

# 安装所有依赖包
$ yarn

# 启动项目
$ yarn dev

# 安装react-router包
$ yarn add react-router-dom@6

二、基础使用

步骤一：导入必要的路由router内置组件

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'

步骤二：准备两个react组件

const Home = () => <div>this is home</div>
const About = () => <div>this is about</div>

步骤三：按照路由的规则进行路由配置

function App() {
  return (
    <div className="App">
      {/* 按照规则配置路由 */}
      <BrowserRouter>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/about" element={<About />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  )
}

三、路由核心内置组件说明

1.BrowerRouter 

作用: 包裹整个应用，一个React应用只需要使用一次

模式：

模式	实现方式	路由url表现
HashRouter	监听url hash值实现	http://localhost:3000/#/about
BrowerRouter	h5的 history.pushState API实现	http://localhost:3000/about

2.Link

作用: 用于指定导航链接，完成声明式的路由跳转 类似于 <router-link/>

<Link to = "/path">页面</Link>

这里to属性用于指定路由地址，表示要跳转到哪里去，Link组件最终会被渲染为原生的a链接

3.Routes

作用: 提供一个路由出口，组件内部会存在多个内置的Route组件，满足条件的路由会被渲染到组件内部，类比 router-view

4.Route

作用: 用于定义路由路径和渲染组件的对应关系 [element：因为react体系内 把组件叫做react element]

<Route path="/about" element={ <About/> }>

其中path属性用来指定匹配的路径地址，element属性指定要渲染的组件，图中配置的意思为: 当url上访问的地址为 /about 时，当前路由发生匹配，对应的About组件渲染