实现的效果是 一个home页,一个routerDemo页面,点击home页的按钮跳转到routerDemo页面,点击routerDemo页面的按钮跳转回home页面
目录
一、介绍及安装
1、介绍
(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)
-
React.lazy()
懒加载需要和import()
动态引入语法配合使用 -
<React.Suspense>
需要和React.lazy()
配合使用
2、下载安装
npm install react-router-dom --save
二、路由配合懒加载使用
1、新建项目
(1)
使用脚手架新建项目挺简单的,搜索react 脚手架 create-react-app
搭建项目
(2)
新建项目后,删除 App.js
和对应的css文件App.css
以及 App.test.js
2、路由配合懒加载简单使用
创建两个页面来简单使用
(1)Home组件
src下创建 pages 文件夹,在 pages 文件夹下创建 home 文件夹,再在 home 文件夹下创建 index.js文件(默认路由是index.js):
import React from "react"
const Home = (props) => {
return (
<div>
home
</div>
)
}
export default Home
(2)RouterDemo 组件
在pages文件夹下创建 routerDemo 文件夹,再在其下创建 index.js
文件:
import React from "react";
const RouterDemo = ( props ) => {