反应路由器组件没有被渲染

Question

I know this question has been asked tons of times but I can't seem to find a working solution for a very simple problem.

I am setting up a simple Navigation Bar using React Bootstrap and React Router

The page loads on the Home page but when a link is clicked the URL changes but the component does not render. When I inspect using google Chrome, the heading is unchanged.

Any help would be greatly appreciated. I've tried almost everything I found here, used withRouter, used regular and

elements instead of the ones from React Bootstrap.

Here is the code, index.js is the regular create-react-app set up

App.js

 import React from 'react'; import { Home } from './components/pages/Home'; import Navibar from './components/Navibar'; import { LostPets } from './components/pages/LostPets'; import { AdoptPets } from './components/pages/AdoptPets'; import { ContactUs } from './components/pages/ContactUs'; import './App.css'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; function App() { return ( <div className="App"> {/* Navigation Bar */} <Router> <Navibar /> {/* Routes for Pages */} <Switch> <Route exact path='/LostPets' component={LostPets}/> <Route exact path='/AdoptPets' component={AdoptPets}/> <Route exact path='/ContactUs' component={ContactUs}/> <Route exact path='/' component={Home}/> </Switch> </Router> </div> ); } export default App;

Navbar.js

 import React from 'react'; import { Navbar, Nav, Container } from 'react-bootstrap'; function Navibar () { return( <Container> <Navbar bg="primary" variant="dark" sticky="top"> <Navbar.Brand href="#home">PETSTT </Navbar.Brand> {/* Navigation Bar items */} <Nav className="mr-auto"> <Nav.Link href="#home">Home </Nav.Link> <Nav.Link href="#lostpets">Lost Pets </Nav.Link> <Nav.Link href="#adoptpets">Adopt Me </Nav.Link> <Nav.Link href="#contactus">Contact Us </Nav.Link> </Nav> </Navbar> </Container> ); }

All pages are just header text like this.

 import React from 'react'; export const Home = () => { return ( <div> <h1> Home </h1> </div> ); }

Answer 1

You Link is going to the wrong url. You are going to a hash url which would suggest a different section on the same page with that ID.

<Nav.Link href="#lostpets">Lost Pets </Nav.Link>

This doesn't match the routes that you are trying to render. The routes are done correctly.

<Route exact path='/LostPets' component={LostPets}/>

You should change the Link to this:

<Nav.Link href="/LostPets">Lost Pets </Nav.Link>