React-Router-v6基础使用

最新推荐文章于 2024-04-12 19:27:57 发布

前端小趴菜

最新推荐文章于 2024-04-12 19:27:57 发布

阅读量131

点赞数

分类专栏： react.js 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/xjx0121/article/details/125172835

版权

react.js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文介绍了如何通过yarn安装React Router DOM v6，并展示了如何在项目中导入模块并配置基本的BrowserRouter、Link和Routes。通过实例演示了如何设置路由，以便实现首页和详情页的跳转。

摘要由CSDN通过智能技术生成

1.安装react-router-dom

yarn add react-router-dom@6

2.页面引入模块

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

代码实例

// 引入组件
import Home from './components/Home'
import Detail from './components/Detail'
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom'


//进行路由配置
function App () {
  return (
    <BrowserRouter>
       {/*指定跳转的组件， to属性用来配置路由地址*/}
      <Link to='/' style={{ marginRight: '20px' }}>首页 </Link>
      <Link to='/detail'>详情 </Link>

      <Routes>
         {/*path属性和link中的to属性相对应  element代表要渲染的组件 path和element都是成对出现的*/}
        <Route path='/' element={<Home />} ></Route>
        <Route path='/detail' element={<Detail />} ></Route>
      </Routes>

    </BrowserRouter>
  )
}

export default App