ReactJs:动态路由显示空的道具

Question

这是我的第一个react应用。我试图从props对象中获取uuid，但它总是返回一个空对象。但是，页面正在加载，没有任何错误。

我用谷歌搜索了一下解决方法，找到了一些，但没有一个能解决这个问题。

App.js

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from "./layouts/Backend";
import Language from "./pages/languages/index";
import LanguageCreate from "./pages/languages/create";
import LanguageEdit from "./pages/languages/edit";
...
export default () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" exact element={<Layout />}>
<Route path="/">
<Route path="/" element={<Language />} />
<Route path={"/language/create"} element={<LanguageCreate />} />
<Route path={"/language/edit/:uuid"} element={<LanguageEdit />} />
</Route>
...
</Route>
</Routes>
</BrowserRouter>
);
};

页面/语言/edit.jsx

import React from "react";
export default class LanguageEdit extends React.Component {
state = {
uuid: null,
};
componentDidMount() {
// this.setState({
//    uuid: this.props.match.params.uuid,
// });
console.log(this.props);
};
render() {
return <div>Language Edit...</div>
}
};

为什么props为空…?
我做错了什么?

Answer 1

你可以试试下面的方法吗

老方法

<Route path="/language/edit/:uuid" render={(props) => <LanguageEdit {...props} />} />

或

Router dom v6 way

<Route path="/language/edit/:uuid" element={<LanguageEdit render={(props) => ({ ...props })} />} />