本文共 2651 字，大约阅读时间需要 8 分钟。

一，初始化

这里使用create-react-app直接初始化一个基本的react项目：

步骤：

1 npm install -g create-react-app   全局安装

2 初始方式：（项目命名不要含有大写字母）

2.1 

create-react-app react-cli-app 

 [这种最常见遇见报 create-react-app不是命令的错，解决方案有：

但是我最后，也依然没有可行，有兴趣可以试试]

2.2  

npx create-react-app react-cli-app

npm run start    运行

到这一步后项目能运行成功，但是如果再想配置更多就需要找到配置文件，

运行命令： 

npm run eject

然后就能看到新增两个目录 

二，【新建一个/Home    /Account   /Goods 页面】

多页面，底部导航切换使用路由

1 创建文件先。

创建 home account goods  底部导航footernav,导航内容下面：

import React,{Component} from 'react'import {Link} from 'react-router-dom'class FooterNav extends Component {    constructor(props) {//getInitialState()        super(props);    }    componentWillMount() {    }    render() {        return (            
   
                    FooterNav                
    home                
    Goods                
    Account            
   
        )    }export default FooterNav

【这里我将原来的css文件都改scss了，然后会报错提示你下载node-sass,npm install node-sass下载重新运行就好了】

2 配置路由切换：

下载npm i  react-router-dom -s

route.jsx

import React,{Component} from 'react'import { HashRouter as Router, Route, Switch} from 'react-router-dom'import Home from '../views/Home/Home.jsx'import Goods from '../views/Goods/Goods.jsx'import Account from '../views/Account/Account.jsx'class RouterMap extends Component {    constructor(props) {//getInitialState()        super(props);          }    componentWillMount() {    }    render() {        const location = this.props.location        return (            
   
                
                        
                         
                         
                         
                     
                
   
        )    } }export default RouterMap

然后修改index.js

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App.jsx';import * as serviceWorker from './serviceWorker';ReactDOM.render(
   , document.getElementById('root'));serviceWorker.unregister();

最后修改app.js

import React,{Component,Fragment} from 'react';import {HashRouter as Router} from 'react-router-dom'//公共组件方法import FooterNav from './component/FooterNav.jsx'//底部导航import RouterMap from './router/router.jsx'import './App.css';function App() {  return (    
   
        
                
                     
                      
                  
             
        
   
  );}export default App;

【这里的路由是v4以上版本的写法，v3与v4差异：】

然后在运行通过路由就能切换了；

如果执行浏览器自动打了断点，并且控制台输出：

这时候去下载就好。

步骤：

1 git clone https://github.com/facebook/react-devtools.git

然后得到一个react-devtools文件夹；

2 在react-devtools里面安装依赖，这里可以使用淘宝镜像

npm  install  

3 依赖安装完成后

npm run build:extension:chrome 

然后在当前目录中生成一个新的文件夹，react-devtools -> shells -> chrome -> build -> unpacked文件夹

4 在chrome中的扩展程序中将打包的文件夹放入

然后就行了。

转载地址：http://vnurf.baihongyu.com/