登录 主页

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

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论