React路由介绍和使用

有三类包 web native anywhere，推荐使用前两个

示例代码

import React from 'react';

import Home from './component/Home.jsx';
import Movie from './component/Movie.jsx';
import About from './component/About.jsx';

// 路由
// react-router-dom
// 如果要使用路由模块，第一步安装包 yarn add reat-router-dom
// HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面，而且，一个网站中，只需使用一次hashRouter就行
// Route表示一个路由规则，在Route，有两个属性： path和component
// Link表示一个路由的链接，好比vue中的route-link
import {HashRouter, Route, Link} from 'react-router-dom';
export default class App extends React.Component{
	constructor(props){
		super(props);

		this.state = {

		};
	}

	render(){
		// 当使用HashRouter把App跟组件的元素包裹起来，访问路径有了#表示启用路由了
		// 在一个HashRouter只能有一个根元素
		// 在一个网站中，只需要使用唯一的一次<HashRouter>
		return <HashRouter>
			<div>
				<h1>这是网站APP跟组件</h1>
				<hr/>
				<Link to="/home">首页</Link>&nbsp;&nbsp;
				<Link to="/movie">电影</Link>&nbsp;&nbsp;
				<Link to="/about">关于</Link>

				<hr/>
				{/* 这里就是路由规则 其中path表示对应的匹配路由 */}
				<Route path="/home" component={ Home }></Route>
				<Route path="/movie" component={ Movie }></Route>
				<Route path="/about" component={ About }></Route>
			</div>
		</HashRouter>
	}
}