React-router v7 第一章(安装)

React-Router V7

React-router 是 React的路由库,如果你学过Vue,跟Vue的Router很相似。它的作用就是,根据不同的URL,匹配不同的组件,然后进行渲染。这样就可以实现在单页面应用中跳转页面。

官方文档:reactrouter.com/home

安装

react-router在最新版本V7中,设计了三种模式

  • 框架模式

框架模式就是使用,React-router 提供的脚手架模板去安装,安装完成后会自带路由功能。

bash 复制代码
npx create-react-router@latest my-react-router-app # 创建项目
cd my-react-router-app # 进入项目
npm i # 安装依赖
npm run dev # 启动项目
  • 数据模式

数据模式就是,我们可以使用自己的模板去创建React项目,比如使用vite webpack 等,然后自己安装React-router

bash 复制代码
npm i react-router #V7不在需要 react-router-dom
ts 复制代码
export const router = createBrowserRouter([
  {
    path: '/',
    Component: Home,
  },
  {
    path: '/about',
    Component: About,
  },
]);
  • 声明模式

声明模式,也可以用自己的模板创建React项目,然后自己安装React-router

bash 复制代码
npm i react-router #V7不在需要 react-router-dom
tsx 复制代码
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router";
import App from "./app";
import About from '../about'
const root = document.getElementById("root");

ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="about" element={<About />} />
    </Routes>
  </BrowserRouter>
);

数据模式和声明模式的区别,数据模式可以享用React-router所有的功能,包括数据处理。而声明模式只能享用React-router的一部分功能,比如路由跳转。

基本使用

  • src/router/index.ts

pages目录创建两个组件,Home和About

新建目录router,在目录中新建文件index.ts,在文件中引入React-router,然后使用createBrowserRouter创建路由。

ts 复制代码
import { createBrowserRouter } from 'react-router';
import Home from '../pages/Home';
import About from '../pages/About';

const router = createBrowserRouter([
  {
    path: '/',
    Component: Home,
  },
  {
    path: '/about',
    Component: About,
  },
]);

export default router;
  • src/App.tsx

App.tsx文件中引入路由,然后使用RouterProvider包裹App组件。

tsx 复制代码
import React from 'react';
import { RouterProvider } from 'react-router';
import router from './router';
const App: React.FC = () => {
  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

export default App;

路由跳转

Home组件中使用NavLink组件跳转到About组件。

tsx 复制代码
import { NavLink } from 'react-router';
const Home: React.FC = () => {
  return (
    <div>
      <NavLink to="/about">About</NavLink>
    </div>
  );
};

export default Home;

About组件中使用Link组件跳转到Home组件。

tsx 复制代码
import { NavLink  } from 'react-router';
const About: React.FC = () => {
  return (
    <div>
      <NavLink to="/">Home</NavLink>
    </div>
  );
};

export default About;
相关推荐
HBR666_2 分钟前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷5 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
自动花钱机6 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
拉不动的猪6 小时前
简单回顾下pc端与mobile端的适配问题
前端·javascript·面试