react-router-dom

搭建router项目

一、安装router的命令，全局安装 

npm install --save react-router-dom

 二、新建三个文件，Home.js，List.js，About.js

Home.js：

import React from 'react'

class Home extends React.Component{
	constructor(props){
		super(props)
	}
	
	render(){
		return <div>
					Home
				</div>
	}
}

export default Home

List.js：

import React from 'react'

class List extends React.Component{
	constructor(props){
		super(props)
	}
	
	render(){
		return <div>
					List
				</div>
	}
}

export default List

 About.js：

import React from 'react'

class About extends React.Component{
	constructor(props){
		super(props)
	}
	
	render(){
		return <div>
					About
				</div>
	}
}

export default About

 三、在app.js文件中代码

import Home from './routerDome/Home.js'
import List from './routerDome/List.js'
import About from './routerDome/About.js'
import { BrowserRouter, Route, Routes, Link} from 'react-router-dom'

function App() {
  return <BrowserRouter>
	<ul>
		<li><Link to="/">首页</Link></li>
		<li><Link to="/list">列表</Link></li>
		<li><Link to="/about">关于</Link></li>
	</ul>
	<Routes>
		<Route path="/" element={<Home/>}></Route>
		<Route path="/list" element={<List/>}></Route>
		<Route path="/about" element={<About/>}></Route>
	</Routes>
  </BrowserRouter>
}

export default App;

router动态传值

一、配置动态路由 

配置动态路由 

• 配置动态路由配置是直接在Route标签的path属性里的路由后加上：就可以了

传递值

• 传递值是在Link标签的to里写入对应的内容，就是传递值

实例：

function App() {
  return <BrowserRouter>
	<ul>
		<li><Link to="/about/123">关于</Link></li>
	</ul>
	<Routes>
		<Route path="/about/:id" element={<About/>}></Route>
	</Routes>
  </BrowserRouter>
}

二、接收动态路由

函数组件

接收动态路由需要将About组件变成函数组件，利用useParams()函数接收

function About(){
	let value = useParams()
	console.log(value);
	return(
		<div>
			About
		</div>
	)
}
export default About