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 (

          <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;