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;
相关推荐
艾小逗40 分钟前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇3 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
大G哥5 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext5 小时前
html初识
前端·html
小小小小宇5 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827525 小时前
vue中 vue.config.js反向代理
前端
Java&Develop5 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk5 小时前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务