react路由

在React中使用react-router-dom路由
使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。

安装
首先进入项目目录，使用npm安装react-router-dom：

npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令
基本操作
然后我们新建两个页面，分别命名为“home”和“detail”。在页面中编写如下代码：

import React from ‘react’;

export default class Home extends React.Component {
render() {
return (

去detail

)
}
}
home.js

import React from ‘react’;

export default class Home extends React.Component {
render() {
return (

回到home

)
}
}
detail.js

然后再新建一个路由组件，命名为“Router.js”，并编写如下代码：

import React from ‘react’;
import {HashRouter, Route, Switch} from ‘react-router-dom’;
import Home from ‘…/home’;
import Detail from ‘…/detail’;

const BasicRoute = () => (






);

export default BasicRoute;
如上代码定义了一个纯路由组件，将两个页面组件Home和Detail使用Route组件包裹，外面套用Switch作路由匹配，当路由组件检测