React-router v7 第一章(安装)

React-Router V7

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

官方文档:https://reactrouter.com/home

安装

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

• 框架模式

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

npx create-react-router@latest my-react-router-app # 创建项目
cd my-react-router-app # 进入项目
npm i # 安装依赖
npm run dev # 启动项目

• 数据模式

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

npm i react-router #V7不在需要 react-router-dom

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

• 声明模式

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

npm i react-router #V7不在需要 react-router-dom

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创建路由。

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组件。

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组件。

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

export default Home;

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

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

export default About;