App.js
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import store from './store';
import Home from './pages/home';
import Detail from './pages/detail';
class App extends Component {
render() {
return (
<Provider store={store}>
<BrowserRouter>
<Routes>
<Route path='/' exact element={<Home />}></Route>
// 动态路由
<Route path='/detail/:id' exact element={<Detail />}></Route>
</Routes>
</BrowserRouter>
</Provider>
);
}
}
export default App;
Detail.js
import React from 'react';
import { useParams } from 'react-router-dom';
import DetailContent from './DetailContent';
// 通过 useParams 进行动态路由参数的接收使用
// useParams 只能在函数式组件中使用
const Detail = (props) => {
const params = useParams()
return (
<DetailContent id={params.id} />
)
}
export default Detail;
DetailContent.js
import React, { Component } from 'react';
class DetailContent extends Component {
render() {
return (
<div>
{this.props.id}
</div>
)
}
componentDidMount() {
console.log(this.props.id)
}
}
export default DetailContent)
以上就是动态路由参数的传递与接收的简单使用。