I created a section to move between different parts of the site with the Router by NavBar in react

user_18341772 0
Viewed 50

We want to show the NavBar section and the home ( doc) page first when the screw is loaded.

  1. The NavBar section should be fixed at the top of the page along the entire site.
  2. The Header section (or home) should be displayed at the beginning of the screen load. Given that these two parts must be indexed at the top of the page at the same time, the header And we made NavBar the father of all links that is fixed at the top of the page

Problem: The problem is that the NavBar page is loaded, but other pages that are clicked on are not loaded and updated in the body by clicking on them, and also the Header document that is index is not loaded.

//index and make router:

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={
            <NavBar
              home_text={"Home"}
              contact_text={"Contact"}
              opinion={"Opinion"}
            />
          }>
          <Route index element={<Header />} />
          <Route path="contact" element={<Contact />} />
          <Route path="opinion" element={<Opinion />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

//NavBar document

function NavBar(props) { console.log(props) return ( <> {props.home_text} 

    <li className="menu_item dc">
    <Link to="/contact"><span className="style_of_text ">{props.contact_text}</span> </Link>
    </li>

    <li className="menu_item dc">
    <Link to="/opinion"><span className="style_of_text ">{props.opinion}</span> </Link>
    </li>
  </ul>
</div>
</>   ); }
react-router reactjs
1 Answers

You are trying to create what is called a layout route. The layout route needs to also render an Outlet component for the nested routes to be rendered into.

<BrowserRouter>
  <Routes>
    <Route
      path="/"
      element={(
        <>
          <NavBar
            home_text={"Home"}
            contact_text={"Contact"}
            opinion={"Opinion"}
          />
          <Outlet /> // <-- nested `Route`s render here
        </>
      )}>
      <Route index element={<Header />} />
      <Route path="contact" element={<Contact />} />
      <Route path="opinion" element={<Opinion />} />
    </Route>
  </Routes>
</BrowserRouter>
user_86908570
Related