在react里如何使用路由

在react里如何使用路由

npm创建react项目。

npm i create-react-app -g 全局安装react
create-react-app myapp 创建名为myapp项目
cnpm i react-router-dom -S 在myapp项目 安装路由

创建成功后 在cmd里
cd 进入创建的文件夹。
用开始说得到的命令 cnpm i react-router-dom -S 安装路由

npm start 以开发模式运行项目

成功启动后 用vscode打开你创建的项目 文件夹有这些文件
我们也可以像vue一样准备一个views目录，用来实现各种页面组件，然后准备一个components目录来实现各个小组件。

目录结构怎么配置这个并没有固定的，不同项目，不同需求，不同开发习惯等都可能会导致目录的不一样，所以只要你的项目目录能够实现较好的扩展性，维护性等都是可以的。

在views文件夹创建三个页面组件
在app.js引入配置路由需要的组件

import {
   
  BrowserRouter as Router,// Router 它能保持 UI 和 URL 的同步。
  //BrowserRouter   使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 来保持 UI 和 URL 的同步
  //HashRouter      使用 URL 的 hash