【react】react路由的基本使用

react-router-dom
1、react的一个插件库
2、专门用来实现一个SPA应用
3、基于react的项目基本都会用到此库

1、安装react路由库

npm i react-router-dom

2、使用

在react-router-dom v5版本里

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

{/* 每个路由外面要用BrowserRouter包裹，这样很麻烦，可以在index.js中render <App/>时包裹一下BrowserRouter */}
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

<BrowserRouter>
	<div className="list-group">
		{/* 原生html中，靠<a>跳转不同的页面 */}
		{/* 在react中靠路由链接实现切换组件----编写路由链接 */}
		<Link className="list-group-item" to="/about">About</Link>
		<br/>
		<Link className="list-group-item" to="/home">Home</Link>
	</div>
	<div className="panel-body">
		{/* 注册路由 */}
		<Route path="/about" component={About}/>
		<Route path="/home" component={Home}/>
	</div>
<BrowserRouter/>

在react-router-dom v6以上版本里

import {Link, BrowserRouter, Route, Routes} from 'react-router-dom'

<BrowserRouter>
	<div className="list-group">
		{/* 原生html中，靠<a>跳转不同的页面 */}
		{/* 在react中靠路由链接实现切换组件----编写路由链接 */}
		<Link className="list-group-item" to="/about">About</Link>
		<br/>
		<Link className="list-group-item" to="/home">Home</Link>
	</div>
	
	<div className="panel-body">
		{/* 注册路由 */}
		<Routes>
			<Route path="/about" element={<About/>}/>
			<Route path="/home" element={<Home/>}/>
		</Routes>
	</div>
<BrowserRouter/>

总结路由的基本使用：
1、明确好界面中的导航区、展示区。
2、导航区的a标签改为link标签
	<Link to="/xxxx">Demo</Link>
3、展示区写Route标签进行路径的匹配
	v5  <Route path="/xxxx" component={Demo}>
	v6以上  <Route path="/xxxx" element={<Demo/>}>

4、的最外侧包裹了一个或