react路由系列01___ 在react脚手架里使用React-router(简单入门)
一、搭建脚手架环境
1、安装node（使用npm）
node版本在6以上
npm版本在3以上
2、安装react脚手架（使用create-react-app工具）
npm i create-react-app -g //脚手架可以简化复杂的配置
3、创建项目
create-react-app 项目名称 //创建的项目是基于： Webpack + ES6 。
如：create-react-app reactrouterdemo
4、运行项目：
npm start
5、在浏览器中输入：localhost:3000
一般来说，运行完npm start后会自动打开浏览器
-
二、React-Router相关的模块
1、安装React-Router 相关的模块（React-Router，React-Router-DOM）
npm i React-Router React-Router-DOM --save
2、每个模块的解释（你也可以不看解释，直接进入下一步，测试代码的效果）
1)、React-Router-DOM：提供了 BrowserRouter, Route, Link等 API,我们可以通过 DOM 的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-Router-DOM。
2）、React-Router：提供了一些router的核心API，包括Router, Route, Switch等，但是它没有提供 DOM 操作进行跳转的API。
-
三、React-Router的代码
1、在脚手架里找到App.js（这个是路由的核心文件，其它都是配角）文件，把代码改成如下（可以复制）：
import React, { Component } from 'react';
import { BrowserRouter, Route,Link} from 'react-router-dom';
import GoodsList from './pages/goodslist';
import ShoppingCar from './pages/shoppingcar';
class App extends Component{
render(){
return (
商品列表01
购物车
以下为内容
{/*以下为路由配置*/}
);
}
}
export default App;解释：
：路由调转导航，相当于标签。
2、在src里创建文件夹“pages”
3、在src/pages里创建文件 “goodslist.js”，复制以下代码：
import React, { Component } from 'react';
class GoodsList extends Component{
render(){
return (
欢迎来到商品列表页面
)
}
}
export default GoodsList;
4、在src/pages里创建文件 “shoppingcar.js”，复制以下代码：
import React,{Component} from 'react';
class ShoppingCar extends Component{
render(){
return (
欢迎来到购物车页面
)
}
}
export default ShoppingCar;5、运行 npm start
6、在浏览器输入：localhost:3000
看到如下界面：
可以分别点击“商品列表01”和“购物车”，看看能不能跳转，一切正常的话，肯定Ok了。
四、补充：
你可以尝试把App.js的文件里增加如下代码：
对比一下，a标签和Link的区别(a标签时，页面有闪动，LInk标签时，页面没有闪动)
（PS：如果使用a标签，在每次点击时，页面被重新加载，标签会避免这种状况发生。当 你点击时，url会更新，组件会被重新渲染，但是页面不会重新加载）
即代码变成了如下：
import React, { Component } from 'react';
import { BrowserRouter, Route,Link} from 'react-router-dom';
import GoodsList from './pages/goodslist';
import ShoppingCar from './pages/shoppingcar';
class App extends Component{
render(){
return (
商品列表01
购物车
<a href="/gl" >商品列表a>
>
<a href="/sc" >购物车a>
以下为内容
{/*以下为路由配置*/}
);
}
}
export default App;