react路由系列01___ 在react脚手架里使用React-router(简单入门)

刺骨的言语ヽ痛彻心扉 2021-12-11 22:59 258阅读 0赞

# #

## 一、搭建脚手架环境 ##

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

![20190710122553492.png][]

4、运行项目：

npm start

5、在浏览器中输入：localhost:3000

一般来说，运行完npm start后会自动打开浏览器

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70][]

*  ## **二、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

看到如下界面：

![20190710123035671.png][]

可以分别点击“商品列表01”和“购物车”，看看能不能跳转，一切正常的话，肯定Ok了。

## 四、补充： ##

你可以尝试把App.js的文件里增加如下代码：

对比一下，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 (

<hr/>

<hr/>

以下为内容

\{/\*以下为路由配置\*/\}

</BrowserRouter>

);

export default App;

[20190710122553492.png]: /images/20211211/daf5d0a39f504ef9bdc57058420faef8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70]: /images/20211211/31fe0596263f4ac4b632a57c47d49923.png
[20190710123035671.png]: /images/20211211/02de20942ca943e1b63ad8e1a558f58d.png