React17中对react-router-dom v6的使用

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)

以上就是动态路由参数的传递与接收的简单使用。