我正在学习 Colt Steele 的 React 类(class)。遗憾的是，类(class)已经过时，所以我选择自己迁移到最新版本的库。
说到这一点，我现在面临这个错误，我无法在我的功能组件中使用 useParams Hook 提取 URL 参数。我在下面粘贴我的代码以供社区检查。
App.js
import Palette from './Palette';
import seedPalettes from './assets/seedPalettes'
import './css/App.css'
import { generatePalette } from './assets/colorHelpers';
import { Routes, Route, Link, useParams } from 'react-router-dom';
function App() {
const { id } = useParams()
const findPalette = id => {
return seedPalettes.find(function (palette) {
return palette.id == id;
})
}
console.log(id);
return (
<div className='App'>
<Routes>
<Route path='/' element={<h1>Welcome Home</h1>} />
<Route path='/palette/:id' element={<Palette palette={generatePalette(findPalette(id))} />} />
</Routes>
{/* <Link to='/palette'>See Palette</Link> */}
{/* <Palette palette={generatePalette(seedPalettes[4])} /> */}
</div>
);
}
export default App;
seedPalettes.js
export default [
{
paletteName: "Material UI Colors",
id: "material-ui-colors",
emoji: "🎨",
colors: [
{ name: "red", color: "#F44336" },
{ name: "pink", color: "#E91E63" },
{ name: "purple", color: "#9C27B0" },
{ name: "deeppurple", color: "#673AB7" },
{ name: "indigo", color: "#3F51B5" },
{ name: "blue", color: "#2196F3" },
{ name: "lightblue", color: "#03A9F4" },
{ name: "cyan", color: "#00BCD4" },
{ name: "teal", color: "#009688" },
{ name: "green", color: "#4CAF50" },
{ name: "lightgreen", color: "#8BC34A" },
{ name: "lime", color: "#CDDC39" },
{ name: "yellow", color: "#FFEB3B" },
{ name: "amber", color: "#FFC107" },
{ name: "orange", color: "#FF9800" },
{ name: "deeporange", color: "#FF5722" },
{ name: "brown", color: "#795548" },
{ name: "grey", color: "#9E9E9E" },
{ name: "bluegrey", color: "#607D8B" }
]
},
{
paletteName: "Flat UI Colors v1",
id: "flat-ui-colors-v1",
emoji: "🤙",
colors: [
{ name: "Turquoise", color: "#1abc9c" },
{ name: "Emerald", color: "#2ecc71" },
{ name: "PeterRiver", color: "#3498db" },
{ name: "Amethyst", color: "#9b59b6" },
{ name: "WetAsphalt", color: "#34495e" },
{ name: "GreenSea", color: "#16a085" },
{ name: "Nephritis", color: "#27ae60" },
{ name: "BelizeHole", color: "#2980b9" },
{ name: "Wisteria", color: "#8e44ad" },
{ name: "MidnightBlue", color: "#2c3e50" },
{ name: "SunFlower", color: "#f1c40f" },
{ name: "Carrot", color: "#e67e22" },
{ name: "Alizarin", color: "#e74c3c" },
{ name: "Clouds", color: "#ecf0f1" },
{ name: "Concrete", color: "#95a5a6" },
{ name: "Orange", color: "#f39c12" },
{ name: "Pumpkin", color: "#d35400" },
{ name: "Pomegranate", color: "#c0392b" },
{ name: "Silver", color: "#bdc3c7" },
{ name: "Asbestos", color: "#7f8c8d" }
]
},
{
paletteName: "Flat UI Colors Dutch",
id: "flat-ui-colors-dutch",
emoji: "🇳🇱",
colors: [
{ name: "Sunflower", color: "#FFC312" },
{ name: "Energos", color: "#C4E538" },
{ name: "BlueMartina", color: "#12CBC4" },
{ name: "LavenderRose", color: "#FDA7DF" },
{ name: "BaraRose", color: "#ED4C67" },
{ name: "RadiantYellow", color: "#F79F1F" },
{ name: "AndroidGreen", color: "#A3CB38" },
{ name: "MediterraneanSea", color: "#1289A7" },
{ name: "LavenderTea", color: "#D980FA" },
{ name: "VerryBerry", color: "#B53471" },
{ name: "PuffinsBill", color: "#EE5A24" },
{ name: "PixelatedGrass", color: "#009432" },
{ name: "MerchantMarineBlue", color: "#0652DD" },
{ name: "ForgottenPurple", color: "#9980FA" },
{ name: "HollyHock", color: "#833471" },
{ name: "RedPigment", color: "#EA2027" },
{ name: "TurkishAqua", color: "#006266" },
{ name: "20000LeaguesUnderTheSea", color: "#1B1464" },
{ name: "CircumorbitalRing", color: "#5758BB" },
{ name: "MagentaPurple", color: "#6F1E51" }
]
},
{
paletteName: "Flat UI Colors American",
id: "flat-ui-colors-american",
emoji: "🇺🇸",
colors: [
{ name: "LightGreenishBlue", color: "#55efc4" },
{ name: "FadedPoster", color: "#81ecec" },
{ name: "GreenDarnerTail", color: "#74b9ff" },
{ name: "ShyMoment", color: "#a29bfe" },
{ name: "CityLights", color: "#dfe6e9" },
{ name: "MintLeaf", color: "#00b894" },
{ name: "RobinsEggBlue", color: "#00cec9" },
{ name: "ElectronBlue", color: "#0984e3" },
{ name: "ExodusFruit", color: "#6c5ce7" },
{ name: "SoothingBreeze", color: "#b2bec3" },
{ name: "SourLemon", color: "#ffeaa7" },
{ name: "FirstDate", color: "#fab1a0" },
{ name: "PinkGlamour", color: "#ff7675" },
{ name: "Pico8Pink", color: "#fd79a8" },
{ name: "AmericanRiver", color: "#636e72" },
{ name: "BrightYarrow", color: "#fdcb6e" },
{ name: "OrangeVille", color: "#e17055" },
{ name: "Chi-Gong", color: "#d63031" },
{ name: "PrunusAvium", color: "#e84393" },
{ name: "DraculaOrchid", color: "#2d3436" }
]
},
{
paletteName: "Flat UI Colors Aussie",
id: "flat-ui-colors-aussie",
emoji: "🇦🇺",
colors: [
{ name: "Beekeeper", color: "#f6e58d" },
{ name: "SpicedNectarine", color: "#ffbe76" },
{ name: "PinkGlamour", color: "#ff7979" },
{ name: "JuneBud", color: "#badc58" },
{ name: "CoastalBreeze", color: "#dff9fb" },
{ name: "Turbo", color: "#f9ca24" },
{ name: "QuinceJelly", color: "#f0932b" },
{ name: "CarminePink", color: "#eb4d4b" },
{ name: "PureApple", color: "#6ab04c" },
{ name: "HintOfIcePack", color: "#c7ecee" },
{ name: "MiddleBlue", color: "#7ed6df" },
{ name: "Heliotrope", color: "#e056fd" },
{ name: "ExodusFruit", color: "#686de0" },
{ name: "DeepKoamaru", color: "#30336b" },
{ name: "SoaringEagle", color: "#95afc0" },
{ name: "GreenlandGreen", color: "#22a6b3" },
{ name: "SteelPink", color: "#be2edd" },
{ name: "Blurple", color: "#4834d4" },
{ name: "DeepCove", color: "#130f40" },
{ name: "WizardGrey", color: "#535c68" }
]
},
{
paletteName: "Flat UI Colors British",
id: "flat-ui-colors-british",
emoji: "🇬🇧",
colors: [
{ name: "ProtossPylon", color: "#00a8ff" },
{ name: "Periwinkle", color: "#9c88ff" },
{ name: "Rise-N-Shine", color: "#fbc531" },
{ name: "DownloadProgress", color: "#4cd137" },
{ name: "Seabrook", color: "#487eb0" },
{ name: "VanaDylBlue", color: "#0097e6" },
{ name: "MattPurple", color: "#8c7ae6" },
{ name: "NanohanachaGold", color: "#e1b12c" },
{ name: "SkirretGreen", color: "#44bd32" },
{ name: "Naval", color: "#40739e" },
{ name: "NasturcianFlower", color: "#e84118" },
{ name: "LynxWhite", color: "#f5f6fa" },
{ name: "BlueberrySoda", color: "#7f8fa6" },
{ name: "MazarineBlue", color: "#273c75" },
{ name: "BlueNights", color: "#353b48" },
{ name: "HarleyOrange", color: "#c23616" },
{ name: "HintOfPensive", color: "#dcdde1" },
{ name: "ChainGangGrey", color: "#718093" },
{ name: "PicoVoid", color: "#192a56" },
{ name: "ElectroMagnetic", color: "#2f3640" }
]
},
{
paletteName: "Flat UI Colors Spanish",
id: "flat-ui-colors-spanish",
emoji: "🇪🇸",
colors: [
{ name: "JacksonsPurple", color: "#40407a" },
{ name: "C64Purple", color: "#706fd3" },
{ name: "SwanWhite", color: "#f7f1e3" },
{ name: "SummerSky", color: "#34ace0" },
{ name: "CelestialGreen", color: "#33d9b2" },
{ name: "LuckyPoint", color: "#2c2c54" },
{ name: "Liberty", color: "#474787" },
{ name: "HotStone", color: "#aaa69d" },
{ name: "DevilBlue", color: "#227093" },
{ name: "PalmSpringsSplash", color: "#218c74" },
{ name: "FlourescentRed", color: "#ff5252" },
{ name: "SyntheticPumpkin", color: "#ff793f" },
{ name: "CrocodileTooth", color: "#d1ccc0" },
{ name: "MandarinSorbet", color: "#ffb142" },
{ name: "SpicedButterNut", color: "#ffda79" },
{ name: "EyeOfNewt", color: "#b33939" },
{ name: "ChileanFire", color: "#cd6133" },
{ name: "GreyPorcelain", color: "#84817a" },
{ name: "AlamedaOchre", color: "#cc8e35" },
{ name: "Desert", color: "#ccae62" }
]
},
{
paletteName: "Flat UI Colors Indian",
id: "flat-ui-colors-indian",
emoji: "🇮🇳",
colors: [
{ name: "OrchidOrange", color: "#FEA47F" },
{ name: "SpiroDiscoBall", color: "#25CCF7" },
{ name: "HoneyGlow", color: "#EAB543" },
{ name: "SweetGarden", color: "#55E6C1" },
{ name: "FallingStar", color: "#CAD3C8" },
{ name: "RichGardenia", color: "#F97F51" },
{ name: "ClearChill", color: "#1B9CFC" },
{ name: "WhitePepper", color: "#F8EFBA" },
{ name: "Keppel", color: "#58B19F" },
{ name: "ShipsOfficer", color: "#2C3A47" },
{ name: "FieryFuchsia", color: "#B33771" },
{ name: "BlueBell", color: "#3B3B98" },
{ name: "GeorgiaPeach", color: "#FD7272" },
{ name: "OasisStream", color: "#9AECDB" },
{ name: "BrightUbe", color: "#D6A2E8" },
{ name: "MagentaPurple", color: "#6D214F" },
{ name: "EndingNavyBlue", color: "#182C61" },
{ name: "SasquatchSocks", color: "#FC427B" },
{ name: "PineGlade", color: "#BDC581" },
{ name: "HighlighterLavender", color: "#82589F" }
]
},
{
paletteName: "Flat UI Colors French",
id: "flat-ui-colors-french",
emoji: "🇫🇷",
colors: [
{ name: "FlatFlesh", color: "#fad390" },
{ name: "MelonMelody", color: "#f8c291" },
{ name: "Livid", color: "#6a89cc" },
{ name: "Spray", color: "#82ccdd" },
{ name: "ParadiseGreen", color: "#b8e994" },
{ name: "SquashBlossom", color: "#f6b93b" },
{ name: "MandarinRed", color: "#e55039" },
{ name: "AzraqBlue", color: "#4a69bd" },
{ name: "Dupain", color: "#60a3bc" },
{ name: "AuroraGreen", color: "#78e08f" },
{ name: "IcelandPoppy", color: "#fa983a" },
{ name: "TomatoRed", color: "#eb2f06" },
{ name: "YueGuangBlue", color: "#1e3799" },
{ name: "GoodSamaritan", color: "#3c6382" },
{ name: "Waterfall", color: "#38ada9" },
{ name: "CarrotOrange", color: "#e58e26" },
{ name: "JalapenoRed", color: "#b71540" },
{ name: "DarkSapphire", color: "#0c2461" },
{ name: "ForestBlues", color: "#0a3d62" },
{ name: "ReefEncounter", color: "#079992" }
]
}
];
colorHelpers.js
这是我从种子调色板创建调色板的地方。
import chroma from 'chroma-js';
const levels = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
const generatePalette = (starterPalette) => {
let newPalette = {
paletteName: starterPalette.paletteName,
id: starterPalette.id,
emoji: starterPalette.emoji,
colors: {}
};
for (let level of levels) {
newPalette.colors[level] = [];
}
for (let color of starterPalette.colors) {
let scale = generateScale(color.color, 10).reverse();
for (let i in scale) {
newPalette.colors[levels[i]].push({
name: `${color.name} ${levels[i]}`,
id: color.name.toLowerCase().replace(/ /g, '-'),
hex: scale[i],
rgb: chroma(scale[i]).css().replace(/,/g, ', '),
rgba: chroma(scale[i]).css().replace('rgb', 'rgba').replace(')', ',1.0)').replace(/,/g, ', ')
})
}
}
return newPalette;
}
const getRange = (hexColor) => {
const end = '#fff';
return [
chroma(hexColor).darken(1.4).hex(),
hexColor,
end
]
}
const generateScale = (hexColor, numOfColors) => {
return chroma.scale(getRange(hexColor)).mode('lab').colors(numOfColors);
}
export { generatePalette };
请帮助我，作为一个初学者，它是非常压倒性的:(。另外，对于笨重的代码块感到抱歉。
最佳答案
useParams Hook 只能在呈现它的 Routes 组件的上下文中访问 Route 的路由匹配参数。 App在Routes组件之外，渲染一个路由渲染path='/palette/:id'。
您可以创建一个包装器组件来“提取”id 路由匹配参数并进行过滤。
import seedPalettes from './assets/seedPalettes';
const findPalette = id => seedPalettes.find(palette => palette.id == id);
const PaletteWrapper = () => {
const { id } = useParams();
const palette = generatePalette(findPalette(id))
return <Palette palette={palette} />;
};
...
function App() {
return (
<div className='App'>
<Routes>
<Route path='/' element={<h1>Welcome Home</h1>} />
<Route path='/palette/:id' element={<PaletteWrapper />} />
</Routes>
</div>
);
}
关于javascript - 在功能组件中使用 useParams 钩子(Hook)获取 id - react router dom v6，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71025652/