React系列之配置基础路由

原创已于 2022-08-04 18:37:28 修改 · 559 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #react.js

于 2022-06-11 10:44:26 首次发布

前端开发同时被 2 个专栏收录

140 篇文章

订阅专栏

react

42 篇文章

订阅专栏

本文介绍了如何使用React Router进行页面路由配置，包括安装React Router库，创建Login和Layout组件，以及在App组件中设置路由规则，实现了从根路径访问布局页面和登录页面的功能。

闲暇之余不忘学习，提升自己，知识在于积累，更是一笔财富。

看完文章，感谢各位支持一下呗！

配置登录页面的路由并显示到页面中：

实现步骤

安装路由：yarn add react-router-dom
在 pages 目录中创建两个文件夹：Login、Layout
分别在两个目录中创建 index.js 文件，并创建一个简单的组件后导出
在 App 组件中，导入路由组件以及两个页面组件
配置 Login 和 Layout 的路由规则

代码实现

pages/Login/index.js

const Login = () => {
return <div>login</div>
}
export default Login

pages/Layout/index.js

const Layout = () => {
return <div>layout</div>
}
export default Layout

app.js

// 导入路由
import { BrowserRouter, Route, Routes } from 'react-router-dom'

// 导入页面组件
import Login from './pages/Login'
import Layout from './pages/Layout'

// 配置路由规则
function App() {
  return (
    <BrowserRouter>
      <div className="App">
       <Routes>
            <Route path="/" element={<Layout/>}/>
            <Route path="/login" element={<Login/>}/>
        </Routes>
      </div>
    </BrowserRouter>
  )
}

export default App