React router doesn't render component after second click for example on menu-CodePudding

after deployment my project on github router doesn't works properly, after refreshing page menu section is rendering but after click on home page and then click on menu again my food product's doesn't rendering and it needs refresh again. why is this happening and how can I fix this? here is my code.

there is website: https://alien949.github.io/restaurant/

APP

function App() {
  return (
    <div className="App">
      <Context.Provider value={{Data}}>
        <Routes>
          <Route path="/" element={<Header />}>
            <Route index element={<Home />} />
            <Route path="/menu" element={<Menu />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
          </Route>
        </Routes>
        <Footer />
      </Context.Provider>
    </div>
  );
}

NAVIGATION

function Navigation() {
  return (
    <>
      <ul className="navigation-ul">
        <li>
          <NavLink className="Navlink" to="/">
            Home
          </NavLink>
        </li>
        <li>
          <NavLink className="Navlink" to="/menu">
            Menu
          </NavLink>
        </li>
        <li>
          <NavLink className="Navlink" to="/contact">
            Contact
          </NavLink>
        </li>
        <li>
          <NavLink className="Navlink" to="/about">
            About
          </NavLink>
        </li>
      </ul>
    </>
  );
}

CodePudding user response：

I looked at how your web application works and I have a number of possible edits for it that I received as part of my practice. I note that it would be better if you drop a link to the source code in the comments so that you can look at the error in more detail.

Navigation problem What I mean. When visiting your site, the active menu item is the "Home" item, which is in an active state all the time. This effect is obtained because the "Home" component is displayed by default on the "/" route. Image at the entrance to the site
Image when selecting another menu item

When you select another menu item, the "Home" item remains active. I propose to fix this problem as follows: add a new route "/home" everywhere along which the "Home" component will be rendered. In the "NavLink" component, replace to="/" with to="/home". The routes should also not specify the path "/" when rendering the component, as there may be some bugs related to the rendering of components. If the "Home" component should always be displayed, then you can automatically redirect any unmarked routes to the address "/home" For example, the following code redirects all undefined routes to the address "/home":

<Route path="*" element={<Navigate to={"/home"} />} />

I also suggest not grouping routes by the path "/", but instead arrange them in a separate file and designate all routes in the array as follows:

const routesConfig = [
    {
        path: '/home',
        element: Home
    },
    {
        path: '/menu',
        element: Menu
    },
    {
        path: '/about',
        element: About
    },
    {
        path: '/contact',
        element: Contact
    }
];

export default routesConfig;

And them define all routes using the map method:

<Routes>
  {routesConfig.map((value, index) => {
    return (
      <Route key={index} path={value.path} element={<value.element />} />
    );
  })}

  <Route path="*" element={<Navigate to={"/home"} />} />
</Routes>

And the menu will accordingly look like this:

      <ul className="navigation-ul">
        <li>
          <NavLink className="Navlink" to="/home">
            Home
          </NavLink>
        </li>
        <li>
          <NavLink className="Navlink" to="/menu">
            Menu
          </NavLink>
        </li>
        <li>
          <NavLink className="Navlink" to="/contact">
            Contact
          </NavLink>
        </li>
        <li>
          <NavLink className="Navlink" to="/about">
            About
          </NavLink>
        </li>
      </ul>

This should fix this problem.

I recommend wrapping all actions with routes in the "BrowserRouter" component from the "react-router-dom" library to avoid possible routing errors.

With your code, it will be something like this:

function App() {
  return (
    <div className="App">
      <Context.Provider value={{Data}}>
       <BrowserRouter>
        <Routes>
         {routesConfig.map((value, index) => {
              return (
                 <Route 
                   key={index} 
                   path={value.path} 
                   element={<value.element />} 
                 />
              );
          })}

          <Route path="*" element={<Navigate to={"/home"} />} />
         </Routes>
        <Footer />
       </BrowserRouter>
      </Context.Provider>
    </div>
  );
}

This is all I can offer to improve your application at the moment :)