react实现一个组件一个页面，路由跳转到一个全新的页面，当前页面内容清空

思路:
要在整个页面上做文章，就会想到根组件，
然后在根组件上进行路由匹配就可以实现整个页面的变化

安装 react-router-dom: npm i react-router-dom -S

// App.js
const app = ()=>{
	return <h1>H1</h1>
}
export default app;

// App2.js
const app = ()=>{
	return <h1>H2</h1>
}
export default app;

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import App2 from './App2'
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom'

let p = {
	name: 'hh',
	age: 18
}
ReactDOM.render(
(<BrowserRouter>
 <Link to="/"/>
 <Link to="/app"/>
	<Switch>
	 <Route path="/app">
			<App2/>
	 </Route> 
	 <Route path="/">
			<App />
	 </Route>
    </Switch>
</BrowserRouter>),
  document.getElementById('root')
);
// 访问http://localhost:3000/app显示H2
// http://localhost:3000/显示H1
// 因为路由匹配默认是模糊的<Route path="/">放前面会优先被匹配，所以不管怎么输入url都会显示H1
// 可以在里面添加exact属性精确匹配<Route exact path="/">
// 但是一般情况下能不用exact就不用，有时候会导致二级路由无法匹配

// App.js
// 子组件也可以通过link改变url然后更新页面整体
import {  Link } from 'react-router-dom'
const app = ()=>{
	return (
	 <Link to="/app">
		<h1>H1</h1>
	 </Link>
	)
}
export default app;
// 点击H1，然后url变成app，显示H2