在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作路由匹配,当路由组件检测