React路由基础应用(版本5)
:npm install react-router-dom@5 --save
前端路由:
1、理解:浏览器端路由,value是component,用于展示页面内容。
2、注册路由: <Route path="/test" component={Test}>
3、工作过程:当浏览器的path变为/test时, 当前路由组件就会变为Test组件
react-router-dom:
- react的一个插件库。
- 专门用来实现一个SPA应用。
- 基于react的项目基本都会用到此库。
一、准备工作:
1、创建project-router-v5工程目录。
2、创建清单文件。 npm init -y
3、创建需要的第三方依赖。 npm install react react-dom react-scripts react-router-dom@5 --save
4、在工程目录下创建public文件夹,在该文件夹下创建index.html。
5、在工程目录下创建src文件夹,在该文件夹下创建:
(1)入口文件index.js;
(2)外层组件App.js和App.css样式文件;
(3)pages文件夹,用于存放页面组件;
(4)再pages文件夹中创建Home.jsx、Resolve.jsx、About.jsx文件
(5)工程目录:
二、编写代码:
1、index.html:
<div id