React 空对象的props v6 react-router

Question

问题：在react-router v5 ,Route 的path 可以在pros拿到。在v6 是空对象，不知道大家怎么解决

看v5的

import React from 'react'
import HouseAdd from "./houseAdd"
import House from "./house"
import HouseEdit from "./houseEdit"
import { NavLink, Routes, Route } from 'react-router-dom'

const layout: React.FC = function () {
    return (
        <div>
            <header>
                <ul>
                    <li><NavLink to="/">首页</NavLink></li>
                    <li><NavLink to="/add">添加</NavLink></li>
                    <li><NavLink to="/edit/sada123">添加</NavLink></li>
                </ul>
                <div>
                    <Routes>
                        <Route path="/" element={<House />}></Route>
                        <Route path="/add" element={<HouseAdd />}></Route>
                        <Route path="/edit/:id" element={<HouseEdit />}></Route>
                    </Routes>
                </div>
            </header>
        </div>
    )
}
export default layout;

另一个页面用props

import React from 'react'
import { RouteProps } from 'react-router';

export  default class HouseEdit extends React.Component<RouteProps> {
    
    render() {
        // console.log(new URL(window.location.href))
        console.log(this.props)
        return (
            <div>edit
                
            </div>
        )
    }
}

再看v6的

import React from 'react'
import HouseAdd from "./houseAdd"
import House from "./house"
import HouseEdit from "./houseEdit"
import { NavLink, Routes, Route } from 'react-router-dom'

const layout: React.FC = function () {
    return (
        <div>
            <header>
                <ul>
                    <li><NavLink to="/">首页</NavLink></li>
                    <li><NavLink to="/add">添加</NavLink></li>
                    <li><NavLink to="/edit/sada123">添加</NavLink></li>
                </ul>
                <div>
                    <Routes>
                        <Route path="/" element={<House />}></Route>
                        <Route path="/add" element={<HouseAdd />}></Route>
                        <Route path="/edit/:id" element={<HouseEdit />}></Route>
                    </Routes>
                </div>
            </header>
        </div>
    )
}
export default layout;

import React from 'react'

export default class HouseEdit extends React.Component {
    render(){
        console.log(this.props)
        return (
            <div>
               V6 edit
            </div>
        )
    }
}

Answer 1

代码的问题比较大啊，兄弟