I'm currently learning the dynamic react route. In my sample code, I have different buttons for each work. When the button is clicked, it must render the WorkDetails component. However, it's not doing that even when I manually change the URL slug. I'm having a hard time figuring out what went wrong.
Codesandbox: https://codesandbox.io/s/dynamic-routes-budulp?file=/src/App.js
This is the routes in my App component
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/works" element={<Work data={data} />}>
<Route path=":slug" element={<WorkDetails />} />
</Route>
</Routes>
</BrowserRouter>
In my Work component, each button is surrounded with Link. For the path, I used the slug from my array of objects in data file.
const Work = ({ data }) => {
return (
<div>
<h1>Works</h1>
{data.map(({ id, name, slug }) => {
return (
<div key={id} id={id}>
<h2>{name}</h2>
<Link to={slug}>
<button>Work Details</button>
</Link>
</div>
);
})}
</div>
);
};
data.js
let works = [
{
id: 1,
name: "Work 1",
slug: "work-one",
subtopics: [
{
title: "About the project",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Sagittis orci a scelerisque purus semper eget duis at. Sodales neque sodales ut etiam sit amet. Proin sed libero enim sed faucibus turpis in eu mi. Blandit libero volutpat sed cras ornare arcu dui. Urna nunc id cursus metus. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Curabitur gravida arcu ac tortor. Natoque penatibus et magnis dis parturient montes nascetur. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Aenean sed adipiscing diam donec adipiscing."
},
{
title: "Process",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Sagittis orci a scelerisque purus semper eget duis at. Sodales neque sodales ut etiam sit amet. Proin sed libero enim sed faucibus turpis in eu mi. Blandit libero volutpat sed cras ornare arcu dui. Urna nunc id cursus metus. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Curabitur gravida arcu ac tortor. Natoque penatibus et magnis dis parturient montes nascetur. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Aenean sed adipiscing diam donec adipiscing."
},
{
title: "Result",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Sagittis orci a scelerisque purus semper eget duis at. Sodales neque sodales ut etiam sit amet. Proin sed libero enim sed faucibus turpis in eu mi. Blandit libero volutpat sed cras ornare arcu dui. Urna nunc id cursus metus. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Curabitur gravida arcu ac tortor. Natoque penatibus et magnis dis parturient montes nascetur. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Aenean sed adipiscing diam donec adipiscing."
}
]
},
{
id: 2,
name: "Work 2",
slug: "work-two",
subtopics: [
{
title: "About the project",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Sagittis orci a scelerisque purus semper eget duis at. Sodales neque sodales ut etiam sit amet. Proin sed libero enim sed faucibus turpis in eu mi. Blandit libero volutpat sed cras ornare arcu dui. Urna nunc id cursus metus. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Curabitur gravida arcu ac tortor. Natoque penatibus et magnis dis parturient montes nascetur. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Aenean sed adipiscing diam donec adipiscing."
},
{
title: "Process",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Sagittis orci a scelerisque purus semper eget duis at. Sodales neque sodales ut etiam sit amet. Proin sed libero enim sed faucibus turpis in eu mi. Blandit libero volutpat sed cras ornare arcu dui. Urna nunc id cursus metus. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Curabitur gravida arcu ac tortor. Natoque penatibus et magnis dis parturient montes nascetur. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Aenean sed adipiscing diam donec adipiscing."
},
{
title: "Result",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Sagittis orci a scelerisque purus semper eget duis at. Sodales neque sodales ut etiam sit amet. Proin sed libero enim sed faucibus turpis in eu mi. Blandit libero volutpat sed cras ornare arcu dui. Urna nunc id cursus metus. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Curabitur gravida arcu ac tortor. Natoque penatibus et magnis dis parturient montes nascetur. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Aenean sed adipiscing diam donec adipiscing."
}
]
},
{
id: 3,
name: "Work 3",
slug: "work-three",
subtopics: [
{
title: "About the project",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Sagittis orci a scelerisque purus semper eget duis at. Sodales neque sodales ut etiam sit amet. Proin sed libero enim sed faucibus turpis in eu mi. Blandit libero volutpat sed cras ornare arcu dui. Urna nunc id cursus metus. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Curabitur gravida arcu ac tortor. Natoque penatibus et magnis dis parturient montes nascetur. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Aenean sed adipiscing diam donec adipiscing."
},
{
title: "Process",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Sagittis orci a scelerisque purus semper eget duis at. Sodales neque sodales ut etiam sit amet. Proin sed libero enim sed faucibus turpis in eu mi. Blandit libero volutpat sed cras ornare arcu dui. Urna nunc id cursus metus. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Curabitur gravida arcu ac tortor. Natoque penatibus et magnis dis parturient montes nascetur. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Aenean sed adipiscing diam donec adipiscing."
},
{
title: "Result",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Sagittis orci a scelerisque purus semper eget duis at. Sodales neque sodales ut etiam sit amet. Proin sed libero enim sed faucibus turpis in eu mi. Blandit libero volutpat sed cras ornare arcu dui. Urna nunc id cursus metus. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Curabitur gravida arcu ac tortor. Natoque penatibus et magnis dis parturient montes nascetur. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Aenean sed adipiscing diam donec adipiscing."
}
]
},
{
id: 4,
name: "Work 4",
slug: "work-four",
subtopics: [
{
title: "About the project",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Sagittis orci a scelerisque purus semper eget duis at. Sodales neque sodales ut etiam sit amet. Proin sed libero enim sed faucibus turpis in eu mi. Blandit libero volutpat sed cras ornare arcu dui. Urna nunc id cursus metus. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Curabitur gravida arcu ac tortor. Natoque penatibus et magnis dis parturient montes nascetur. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Aenean sed adipiscing diam donec adipiscing."
},
{
title: "Process",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Sagittis orci a scelerisque purus semper eget duis at. Sodales neque sodales ut etiam sit amet. Proin sed libero enim sed faucibus turpis in eu mi. Blandit libero volutpat sed cras ornare arcu dui. Urna nunc id cursus metus. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Curabitur gravida arcu ac tortor. Natoque penatibus et magnis dis parturient montes nascetur. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Aenean sed adipiscing diam donec adipiscing."
},
{
title: "Result",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Sagittis orci a scelerisque purus semper eget duis at. Sodales neque sodales ut etiam sit amet. Proin sed libero enim sed faucibus turpis in eu mi. Blandit libero volutpat sed cras ornare arcu dui. Urna nunc id cursus metus. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Curabitur gravida arcu ac tortor. Natoque penatibus et magnis dis parturient montes nascetur. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Aenean sed adipiscing diam donec adipiscing."
}
]
}
];
On my WorkDetails component, I used the useParams() which I expect to return the slug. Then, I used the slug to find the object with the same slug. The state will then be updated with the found object.
const WorkDetails = () => {
const { slug } = useParams();
// Find the object with the same slug as the params.
const [work, setWork] = useState(null);
let findWork = data.find((d) => d.slug === slug);
if (findWork) {
setWork(findWork);
}
return (
<div>
<Link to="/works">
<button>Back to Works</button>
</Link>
<h1>{work.name}</h1>
{work.subtopic.map((topic) => {
return (
<>
<h2>{topic.title}</h2>
<p>{topic.description}</p>
</>
);
})}
</div>
);
};
CodePudding user response：
Change your code in app.js to this
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/works" element={<Work data={data} />} />
<Route path="/works/:slug" element={<WorkDetails />} />
</Routes>
</BrowserRouter>
and this line <Link to={slug}>to this <Link to={${slug}}>
and work details to this
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import data from "./data";
const WorkDetails = () => {
const { slug } = useParams();
console.log(";", slug);
// Find the object with the same slug as the params.
const [work, setWork] = useState({});
let findWork = data.find((d) => d.slug === slug);
console.log("ll", findWork);
useEffect(()=>{
if (findWork) {
setWork(findWork);
}
}, [findWork])
return (
<div>
<Link to="/works">
<button>Back to Works</button>
</Link>
<h1>{work?.name}</h1>
{work?.subtopics?.map((topic) => {
return (
<>
<h2>{topic.title}</h2>
<p>{topic.description}</p>
</>
);
})}
</div>
);
};
export default WorkDetails;
CodePudding user response：
change your workDetail file as
const WorkDetails = () => {
const { slug } = useParams();
// Find the object with the same slug as the params.
const [work, setWork] = useState({});
useEffect(()=>{
let findWork = data.find((d) => d.slug === slug);
if (findWork) {
setWork(findWork);
}
}, [findWork])
return (
<div>
<Link to="/works">
<button>Back to Works</button>
</Link>
<h1>{work.name}</h1>
{work.subtopic?.map((topic) => {
return (
<>
<h2>{topic.title}</h2>
<p>{topic.description}</p>
</>
);
})}
</div>
);
};
CodePudding user response：
There are a couple of issues:
the sequencing of the routes is not correct, its should be from specific to generic.
Also in the work details you are setting the variable incorrectly.
I have tweaked your example for you, see below.