i’m trying to run snippet code as below:
class App extends Component { render() { return ( <Router> <div className="App"> <Navbar></Navbar> <Routes> <Route path="/" element={<Home></Home>} /> <Route path="/about" element={<About></About>} /> <Route path="/contact" element={<Contact></Contact>} /> <Route path="/challenges/*" element={<Challenges></Challenges>} /> <Route path="*" element={<NotFound />} /> </Routes> </div> </Router> ); } } let a = 0; const Challenges = (props) => { console.log(++a); console.log(window.location.pathname); const path = props.location.pathname; const slug = path.split("/").slice(path.split("/").length - 1)[0]; const challenge = challenges.find((challenge) => challenge.slug === slug); return ( <div> <h1>30 Days Of React Challenge</h1> <ul> {challenges.map(({ name, slug }) => ( <li key={name}> <NavLink to={`/challenges/${slug}`}>{name}</NavLink> </li> ))} </ul> <Routes> <Route exact path="/challenges" element={<h1>Choose any of the challenges</h1>} /> <Route path={path} element={<Challenge challenge={challenge} />} /> </Routes> </div> ); };
i want to get the path at Challenges route component but it throw an error: Cannot read properties of undefined (reading ‘pathname’) i try to log variable “a” and “window.location” to test and it log two times like this:
1 /challenges 2 /challenges
My question is why i can’t take value of props.location.pathname and why its run two times and the second time it throw an error why not at fisrt time. Thank for helping me! Hope you have a good day.
Advertisement
Answer
Issue(s)
- react-router-dom v6
Route
components rendered via theelement
prop don’t receive route props. - Route children components must use react hooks to access the route context, i.e.
useParams
,useLocation
,useNavigate
, etc… and therefore must be function components. - The
console.log
calls are in the function body so these are unintentional side-effects. This is likely why they are called twice, assuming the app is being rendered into aReact.StrictMode
component.
Solution
Challenges
should use the uselocation
hook to access the pathname. Move the console logs into an useEffect
hook so they are called once per render to the DOM.
const Challenges = (props) => { const { pathname } = useLocation(); useEffect(() => { console.log(++a); console.log(pathname); }); const path = pathname; const slug = path.split("/").slice(path.split("/").length - 1)[0]; const challenge = challenges.find((challenge) => challenge.slug === slug); return ( <div> <h1>30 Days Of React Challenge</h1> <ul> {challenges.map(({ name, slug }) => ( <li key={name}> <NavLink to={`/challenges/${slug}`}>{name}</NavLink> </li> ))} </ul> <Routes> <Route path="/challenges" element={<h1>Choose any of the challenges</h1>} /> <Route path={path} element={<Challenge challenge={challenge} />} /> </Routes> </div> ); };