-1

I cant transfer props from the position where its being called(in my Route element) to my component.

i have tried changing the code and reviewing it but still returns me an empty bracket{}, also have tried what chatGpt has suggested but it cant give me an answer also. here is what it is saying:

If the :slug parameter is not being passed to the TestPage component, it's possible that the issue is with the way the route is being matched.

Here are a few things you can try to troubleshoot the issue:

  1. Make sure that the :slug parameter is specified correctly in the route path. It should be prefixed with a colon like this: /:slug.
  2. Try removing any extraneous characters from the URL (such as trailing slashes) to make sure that the route is being matched correctly.
  3. If you are using nested routes, make sure that the parent route is being rendered correctly and that it is passing the necessary props down to the child routes.
  4. If you are using a custom Route component or a custom router, make sure that it is implemented correctly and that it is correctly matching the route paths. If none of these steps solve the issue, you may need to provide more information about your app's code and structure so that we can better understand what might be causing the problem.

no.1 is not applicable,no.2 i didnt understand,no.3 i am not using a nested route withing route, no.4 not using a custom route.

here is my code :

export default App;

import "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { TestPage } from "./components/Test";
import { HomePage } from "./containers/HomePage";
import { ProductListPage } from "./containers/ProductListPage";

function App() {
  return (
    <div>
      <Router>
        <Routes>
        <Route path= '/test/:slug' element={<TestPage />} />
          <Route path=':slug' element={<ProductListPage  />} />
          <Route exact path="/" element={<HomePage />} />
        </Routes>
      </Router>
    </div>
  );
}

and here is the productListPage code :

import { useDispatch } from "react-redux";
import { Layout } from "../../components/Layout";
import { useEffect } from "react";
import { productBySlug } from "../../actions";

export const ProductListPage = (props) => {
  const dispatch = useDispatch();

  useEffect(() => {
    console.log(props);
    dispatch(productBySlug());
  }, [props]);

  return (
    <Layout>
      <p>ProductListPage</p>
    </Layout>
  );
};
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
maaz-anwer
  • 1
  • 1

1 Answers1

0

It's all because the element prop doesn't apply any param to it you're passing to it ready element.

If you want to get params use useParams hook inside your component.

As they do in the documentation: https://reactrouter.com/en/main/route/route#dynamic-segments

kirusick
  • 14
  • @maaz-anwer If you're familiar with React I think you can pass the official tutorial where they covered all cases https://reactrouter.com/en/main/start/tutorial The reason why you're facing errors can be in the different router's version, also if you better learn from video format maybe you should find freshier video – kirusick Apr 27 '23 at 21:42