react-router-dom 安装和使用

**React 可以使用的2款插件 react-router react-router-dom ** ，各自功能：
react-router 实现了路由的核心功能
react-router-dom基于react-router,但是加入了浏览器运行环境下的一些功能，如Link组件，BrowserRouter和HashRouter等

react-router-natiave 则是基于react-native的开发环境

项目快速创建

create-react-app 帮助我们实现react项目的快速创建
npm install -g create-react-app
全局安装，npm 安装缓慢可以切换淘宝镜像源
npx create-react-app my-app
安装到项目目录下
cd my-app
进入项目
npm start
安装完成后即可运行查看

安装 react-router-dom

npm install --save react-router-dom

查看package.json依赖

"dependencies": {
    "history": "^4.7.2",
    "invariant": "^2.2.2",
    "loose-envify": "^1.3.1",
    "prop-types": "^15.5.4",
    "react-router": "^4.2.0",
    "warning": "^3.0.0"
  }

发现react-router-dom 下，已自动下载react-router依赖安装包

引入相关组件

 import  { BrowserRouter as Router, Route, HashRouter, Switch,Link}  from  "react-router-dom"

常规API链接地址 https://reactrouter.com/web/api

做一个简单单页APP

import React,{ Component } from 'react'

export default class A extends Component {
	render(){
		return <h1>这里是A</h1>
	}
}

A.js

import React,{ Component } from 'react'

export default class B extends Component {
	render(){
		return <h1>这里是B</h1>
	}
}

B.js

import React,{ Component } from 'react'
import ReactDOM from 'react-dom'
/*A B组件引入*/
import a from './A'
import b from './B'

import { BrowserRouter as Router,Route,Switch,Link} from 'react-router-dom'

class Rdom extends Component {
	render(){
		return(
			<Router>
				<ul>
					<li><Link to="/">TAB a|</Link></li>
					<li><Link to="/b">TAB b</Link></li>
				</ul>
				<div>
					<Switch>
						<Route path="/b" component={ b } />
						<Route path="/" component={ a } />
						/*默认选项放在最后*/
					</Switch>
				</div>
			</Router>
		)
	}
}

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

index.js

添加点样式进去，创建一个index.scss文件（不做过多描述）

npm start 运行看

create-react-app虽然帮我们做了一些配置，运行提醒还需要安装 node-sass sass-loader
安装node-sass前，请确认已经安装过python 2.0.0版本
npm install -S sass-loader node-sass
然后运行文件

继续报错，提示我们安装的版本过高，卸载重新安装
npm uninstall node-sass
安装4.0.0以上版本，这里指定安装版本@4.14.1
npm install node-sass@4.14.1

安装完成后，我们来执行看看

启动sever ,跳转进入页面查看

以上完成