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.

CodePudding user response：

Issue(s)

react-router-dom v6 Route components rendered via the element 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 a React.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>
  );
};

v6 api-reference