Blog

react 路由的使用

2023-10-27 02:42PM

1. 安装 React Router

npm install react-router-dom

2. 导入所需的数组和函数（可以在 index.js 文件中）

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

BrowserRouter：提供了一个包装器，使得你的应用程序可以使用基于浏览器的路由。Routes：定义一个路由规则，指定了URL路径和对应的组件。Route：用于包裹Route组件，确保只有一个路由匹配。

3. 路由设置规则

可以在Router组件内部放置多个Route组件，每个组件都会根据指定的路径渲染不同的组件：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Index from './article/index';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
<BrowserRouter>
<Routes>
<Route exact path="/" element={<Index />} />
</Routes>
</BrowserRouter>,
document.getElementById('root')
);

reportWebVitals();

/ 路径对应的是 Index 组件

返回>>

请登录后再发表评论。

评论列表:

目前还没有人发表评论