0

I am using react-router v6, and I am trying to create routes dynamically from an array, the problem is when I go to any other route like '/tech' for example when I refresh it returns me to the homepage and the URL stays the same. how can I fix that? I want the app to stay on /tech on refresh

<Routes>
 {this.state.categories.map((category) => {
                                    return (
                                        <Route
                                            key={category.name}
                                            path={`${
                                                category.name === "all" ? "/" : `${category.name}`
                                            }`}
                                            exact
                                            element={
                                                <PLP/>
                                            }
                                        />
                                    );
                                })}

these are all the routes rendered in my app if that is of any help

<Routes>
    {this.state.categories.map((category) => {
    return (
    <Route
        key={category.name}
        path={`${
        category.name === "all" ?"/" : `/${category.name}`}`}
        exact
        element={<PLP/>}
        />
        );})}
        <Route
        path="/cart"
        element={<Cart/>}/>
        <Route
        path="/pdp/:productID"
        element={<PDP/>}
        />
</Routes>

1 Answer 1

0

I forked a template to obtain a codesandbox reproducing your issue.

Categories are defined as an array of objects:

const categories = [
    {
      name: "all"
    },
    {
      name: "tech"
    },
    {
      name: "fruits"
    }
  ];

and the routes are dynamically created from the categories array.

<Routes>
      {categories.map((category) => {
        return (
          <Route
            key={category.name}
            path={`${category.name === "all" ? "/" : `${category.name}`}`}
            exact
            element={
              <>
                <Navbar links={categories} />
                <main>
                  <h4>Current page:</h4>
                  <p>{category.name}</p>
                </main>
              </>
            }
    </Routes>

For testing purposes, the Navbar component allows you to change routes through Links that are created using the same array of categories.

However after refreshing the page, it stays on the current page as expected.

Behaviour

  • click on tech link
  • url change to "/tech"
  • renders the tech text
  • refresh
  • url stays the same
  • renders the tech text

Maybe the problem isn't in this part of the code or I misunderstood.

I hope this has been helpful to you.

I will be happy to know more.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.