React路由操作介绍以及应用

简介

使用React框架搭建的前端项目都是单页面Web应用简称SPA，简单说就是整个项目只有一个完整的页面，页面中的组件使用的都是局部刷新。因此，在React中路由的使用就大大减轻的开发难度。

路由

对于路由来说，最简单的理解就是点击跳转到不同组件。这就很像在最基础的html中我们使用a标签跳转到不同的界面。React中常用的路由标签有：

• BrowserRouter
• Routes
• Route

例：
一般我们会用BrowserRouter包裹整体的内容，然后利用Routes标签，Routes标签中可以包含若干个Route标签。

function App() {
  return (
    <>
      <BrowserRouter>
        <NavBar/>
        <Routes>
          <Route index element={<EmployeeList/>}/>
          <Route path="/" element={<EmployeeList/>}/>
          <Route path="/employeeList" element={<EmployeeList/>}/>
          <Route path="/addEmployee" element={<AddEmployee/>}/>
          <Route path="/editEmployee/:id" element={<UpdateEmployee/>}/>
        </Routes>
      </BrowserRouter>
    </>
  );
}
export default App;

这里Route标签中主要包含以下几个常用参数：

• index：表示默认路由
• path: 表示具体的URL
• element：表示具体的组件

简单解释一下上面的代码，首先React的默认URL是localhost:3000，因此当我们访问localhost:3000时就会默认进入EmployeeList这个组件的内容，当我们访问localhost:3000/addEmployee时就会默认进入AddEmployee这个组件的内容。