React路由使用&React路由懒加载&简单实践

最新推荐文章于 2024-07-28 22:28:43 发布

H千面

最新推荐文章于 2024-07-28 22:28:43 发布

阅读量1k

点赞数

分类专栏： # React学习文章标签： react.js

本文链接：https://blog.csdn.net/H200102/article/details/120832786

版权

本文介绍了在React中如何使用`react-router-dom`进行路由配置，并结合懒加载实现组件按需加载。通过实例展示了从项目搭建、创建Home和RouterDemo组件、配置router.js以及在index.js中设置路由，到实现页面间跳转的过程。

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

实现的效果是一个home页，一个routerDemo页面，点击home页的按钮跳转到routerDemo页面，点击routerDemo页面的按钮跳转回home页面

一、介绍及安装

（1）
在 React 的使用中，我们一般要引入两个包，react和 react-dom。
而 React路由有两个包，react-router 和 react-router-dom ，使用的时候，只需要引用一个即可。
后者比前者多出了这样的 DOM 类组件。

react-router：提供了router的核心api。如Router、Route、Switch等，但没有提供有关dom操作进行路由跳转的api；
react-router-dom：提供了BrowserRouter、Route、Link等 api，可以通过dom操作触发事件控制路由。

因此我们只需引用 react-router-dom 这个包就行了。当然，如果搭配 redux ，你还需要使用 react-router-redux。

（2）

npm install react-router-dom --save

（1）
使用脚手架新建项目挺简单的，搜索react 脚手架 create-react-app搭建项目
（2）
新建项目后，删除 App.js 和对应的css文件App.css 以及 App.test.js

创建两个页面来简单使用

src下创建 pages 文件夹，在 pages 文件夹下创建 home 文件夹，再在 home 文件夹下创建 index.js文件（默认路由是index.js）：

import React from "react"

const Home = (props) => {
   
  return (
    <div>
      home
    </div>
  )
}

export default Home

在pages文件夹下创建 routerDemo 文件夹，再在其下创建 index.js 文件：

import React from "react";

const RouterDemo = ( props ) => {

关注

专栏目录