英文:
How to replace match.params with useParams() in React Router v6?
问题
In react-router v6，match.params已被删除，只能使用useParams() hook。要使用useParams()来使示例代码工作，您可以这样修改：
import React from "react";
import Palette from "./Palette";
import Seeds from "./Seeds";
import { makePalette } from "./ColorHelpers.js";
import { Route, Routes, useParams } from "react-router-dom";
export default function App() {
const { id } = useParams(); // 使用 useParams() 获取参数 id
const findPalette = (id) => {
return Seeds.find(function (palette) {
return palette.id === id;
});
};
return (
<Routes>
<Route exact path="/" element={<h1>PALETTE LIST GOES HERE</h1>} />
<Route
exact
path="/palette/:id"
element={<Palette palette={makePalette(findPalette(id))} />}
/>
</Routes>
);
}
请注意，我已经将类组件更改为函数组件，并使用const { id } = useParams();来获取路由参数。此外，我还将render更改为element，以适应新的react-router v6语法。
英文:
In react-router v6 the match.params has been removed, with only the useParams() hook available. Now I can't figure out the tweak. The code below is made on Router v4. How can I make the indicated code work using useParams(). Can't figure it out:
import React, { Component } from "react";
import Palette from "./Palette";
import Seeds from "./Seeds";
import { makePalette } from "./ColorHelpers.js";
import { Route, Routes, useParams } from "react-router-dom";
export default class App extends Component {
findPalette(id) {
return Seeds.find(function (palette) {
return palette.id === id;
});
}
routeProps() {
let id = useParams()
}
render() {
return (
<Routes>
<Route exact path="/" element={<h1>PALETTE LIST GOES HERE</h1>} />
<Route
exact
path="/palette/:id"
render={routeProps => ( // <-- this code
<Palette
palette={makePalette(
this.findPalette(routeProps.match.params.id)
)}
/>
)}
/>
</Routes>
);
}
}
I have tried changing the render to element and removing the arrow function routeProps => () into a separate function with useParams().
答案1
得分: 2
只有翻译文本，不回答问题：
"You’re trying to use the useParams hook inside a class component, which won’t work since hooks can’t be used directly in class components. Either refactor your component as a functional component or wrap it in a higher order component as described here:
Once you do so, you can destructure the id parameter returned from the useParams hook:
const {id} = useParams();
Move this destructured assignment out of the routeProps function into the body of the functional component. Then you can access id in your bolded lines with findPalette(id).
英文:
You’re trying to use the useParams hook inside a class component, which won’t work since hooks can’t be used directly in class components. Either refactor your component as a functional component or wrap it in a higher order component as described here:
Once you do so, you can destructure the id parameter returned from the useParams hook:
const {id} = useParams();
Move this destructured assignment out of the routeProps function into the body of the functional component. Then you can access id in your bolded lines with findPalette(id).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论