前言：此前我使用从0开始配置webpack框架，然后引入相关依赖的方式进行项目的搭建。但到引入react路由的时候，发现BrowserRouter（HashRouter可以）在该框架下无法运行，提示can not get /xxx(路径名) 并不能按照配置的路径成功跳转，搞了几天没什么头绪，就放弃了，连带着那篇随笔也就完结了（事实上是“太监了”，hhhhh）。然后，用了react提供的自动化脚手架来搭建项目。
一、安装脚手架
npm install -g create-react-app
二、创建React项目
create-react-app myApp
其中myApp为项目的目录名称，自定义即可。
到这里之后，就可以使用 npm start 在项目文件夹中运行该项目了。
三、create react app添加 Sass 样式表 以及模块化样式
create react app自动化脚手架预装了部分的sass处理模块，但倘若我们需要在自己的项目中使用它，则还需要安装 node-sass ：
npm install node-sass --save
安装成功后，即可以在项目中使用sass文件，例如之前的app.css文件现在可以命名为app.scss，此前的app.module.css的模块化样式表可以命名为app.module.scss，并且使用方法与之前一致。
四、引入react路由：
要添加React Router，运行：
npm install --save react-router-dom
接下来便可以这样改造我们的App.js文件了：
import React from ‘react‘;
import { BrowserRouter as Router, Switch, Route } from ‘react-router-dom‘;
import Sub from ‘./pages/sub‘;
import Login from ‘./pages/login‘;
import ‘./App.css‘;
function App() {
return (
<div className="App">
<Router>
<Switch>
<Route path=‘/‘ exact component={Sub} />
<Route path=‘/login‘ component={Login} />
</Switch>
</Router>
</div>
);
}
export default App;
React Router是一个开放性极高的插件，更多的应用场景（例如受保护的页面、vue-router一样的路由配置）等等都可以通过封装它来实现。同时需要注意的是实现上述场景需要用到更多的诸如Route组件上的render属性等更多的API。
五、添加移动端调试工具 vConsole：
下载：
npm install vconsole -D;
在根目录的index.js中添加如下代码：
import VConsole from ‘vconsole‘; new VConsole();
完成。
原文地址：https://www.cnblogs.com/woailiming/p/12607436.html