I can't understand why it gives me the above error. I used the props way with props.match.params.languagename and it works just fine.

I did not include all imports in the code below.

import { useParams } from 'react-router';



const App = () => {

  const topicsState = useSelector(state => state.topics);



  const dispatch = useDispatch();

  const { languagename } = useParams();



  useEffect(() => {

    dispatch(fetchGitHubTrendingTopics());

  }, [dispatch]);



  const handleRepositoryPages = () => {

    const repositoryPages = topicsState.find(

      topicState => topicState.name === languagename

    );

    if (repositoryPages)

      return <RepositoryPage repositoryPages={repositoryPages} />;

  };

  return (

    <>

      <Router>

        <Header topics={topicsState} />

        <Switch>

          <Route path=/ exact>

            <Dashboard topics={topicsState} />

          </Route>

          <Route

            path=/language/:languagename

            exact

            render={handleRepositoryPages()}

          />



          <Redirect to=/ />

        </Switch>

      </Router>

    </>

  );

};