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.
Route components rendered via the element prop don't receive route props.useParams, useLocation, useNavigate, etc... and therefore must be function components.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 a React.StrictMode component.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>
);
};