一、搭建脚手架环境
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 (
<BrowserRouter>
<Link to="/gl" >商品列表01</Link><br/>
<Link to="/sc" >购物车</Link><br/>
<hr/>
以下为内容
{/*以下为路由配置*/}
<Route path='/gl' component={GoodsList} />
<Route path='/sc' component={ShoppingCar} />
</BrowserRouter>
);
}
}
export default App;
解释:
<BrowserRouter>标签:保证 UI 界面和 URL 保持同步
<Route>标签:当浏览器访问地址与 Route 上的 path 匹配时,就渲染出对应的 UI 界面。
<Link>:路由调转导航,相当于<a>标签。
2、在src里创建文件夹“pages”
3、在src/pages里创建文件 “goodslist.js”,复制以下代码:
import React, { Component } from 'react';
class GoodsList extends Component{
render(){
return (
<div>欢迎来到商品列表页面</div>
)
}
}
export default GoodsList;
4、在src/pages里创建文件 “shoppingcar.js”,复制以下代码:
import React,{Component} from 'react';
class ShoppingCar extends Component{
render(){
return (
<div>欢迎来到购物车页面</div>
)
}
}
export default ShoppingCar;
5、运行 npm start
6、在浏览器输入:localhost:3000
看到如下界面:
可以分别点击“商品列表01”和“购物车”,看看能不能跳转,一切正常的话,肯定Ok了。
四、补充:
你可以尝试把App.js的文件里增加如下代码:
<a href="/gl" >商品列表</a><br/>
<a href="/sc" >购物车</a><br/>
对比一下,a标签和Link的区别(a标签时,页面有闪动,LInk标签时,页面没有闪动)
(PS:如果使用a标签,在每次点击时,页面被重新加载,<Link>标签会避免这种状况发生。当 你点击<Link>时,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 (
<BrowserRouter>
<Link to="/gl" >商品列表01</Link><br/>
<Link to="/sc" >购物车</Link><br/>
<hr/>
<a href="/gl" >商品列表</a><br/>
<a href="/sc" >购物车</a><br/>
<hr/>
以下为内容
{/*以下为路由配置*/}
<Route path='/gl' component={GoodsList} />
<Route path='/sc' component={ShoppingCar} />
</BrowserRouter>
);
}
}
export default App;