How do i make about component show?

user_10226756 0
Viewed 28

I can't navigate to the about component and another component only the Navigation page is showing

  return (
    <div className="Container">
      <Navbar></Navbar>
      <Router>
        <Routes>
          <Route path="/" exact component={Home}></Route>
          <Route path="/about" exact component={About}></Route>
          <Route path="/price" exact component={Pricing}></Route>
          <Route path="/testimony" exact component={Testimonial}></Route>
        </Routes>
      </Router>
    </div> 
  );
}
react-router-dom reactjs
1 Answers

In react-router-dom v6 the Route props no longer take exact and component props, they take a path and element props. Another difference you'll see is that you render the route's child component as JSX instead of passing a reference to the component.

The Navbar also needs to be rendered within the Router so it receives the routing context.

function App() {
  return (
    <div className="Container">
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/price" element={<Pricing />} />
          <Route path="/testimony" element={<Testimonial />} />
        </Routes>
      </Router>
    </div>
  );
}

Edit how-do-i-make-about-component-show

See the migration guide for other changes and how to upgrade from v5 to v6.

user_86908570
Related