使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置

 create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。

  create-react-app 自动创建的项目是基于 Webpack + ES6 

  执行命令如下:

复制代码

npm install create-react-app -g  // 全局安装create-react-app,如果不想全局安装,则不要-g。可能会很慢,可以使用cnpm来安装

create-react-app my-app  // my-app是项目名

cd my-app  

npm start  // 启动项目

复制代码

  这里按部就班来执行就行了,没啥可说的。

  接下来要说的是react-router 4.x路由配置。

  之前是按照react-router 4.x以下版本来配置,结果发现老报错,死活运行不出来,网上查资料一看,坑爹的,原来3.x与4.x路由配置是完全不一样的。

  4.x的版本需要安装react-router-dom

  

  准备工作:安装react-router-dom

   npm install react-router-dom --save // --save 会把依赖包名称添加到 package.json 文件 dependencies 键下,运行时依赖 

  

  (1)、在src文件夹下创建components文件夹,用来存放组件。例如我的是这样的:

        

    其中index.js是路由配置文件。

  (2)、在路由配置文件index.js中依次导入要使用的组件以及路由需要使用的组件。如我的配置是这样的:    

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

import {

    BrowserRouter as Router,

    Route,

    Link

}from 'react-router-dom';

import './index.css';

import App from './components/App';  // 导入App组件

import About from './components/About'// 导入About组件

import Inbox from './components/Inbox'// 导入Inbox组件

import registerServiceWorker from './registerServiceWorker';

export default class Hello extends Component{

    render(){

        return (

            <Router>

                <div>

                    <ul className="nav">

                  <li><Link to="/">App</Link></li>

                  <li><Link to="/About">About</Link></li>

                  <li><Link to="/Inbox">Inbox</Link></li>

               </ul>

                    <hr />

                    <Route exact path="/" component={App} />

                    <Route path="/About" component={About} />

                    <Route path="/Inbox" component={Inbox} />

                </div>

            </Router>

        )

    }

}

ReactDOM.render(<Hello />, document.getElementById('root'));

registerServiceWorker();

  其中exact是用来”/”做唯一的匹配。如果没有这个的话,在匹配其他的同时也会匹配到当前

  运行效果如下:

      

      

      

  

  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值