Blank screen when using react routes-CodePudding

I am trying to use react router for my website, but when I add routes my website just shows a blank white screen.

My navbar:

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import {BrowserRouter as Router, Routes, Route, Link} from "react-router-dom";
import Home from "../pages/Home.js" 
import About from "../pages/About.js" 

function NavbarComp () {
    return (
        <Router>
            <div>
                <Navbar bg="light" expand="lg">
                <Container>
                    <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto">
                        <Nav.Link as={Link} to={"/home"}>Home</Nav.Link>
                        <Nav.Link as={Link} to={"/about"}>About</Nav.Link>
                        <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.2">
                            Another action
                        </NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                        <NavDropdown.Divider />
                        <NavDropdown.Item href="#action/3.4">
                            Separated link
                        </NavDropdown.Item>
                        </NavDropdown>
                    </Nav>
                    </Navbar.Collapse>
                </Container>
                </Navbar>

                <Routes>
                    <Route path="/home" element={<Home />}>
                        <Home />
                    </Route>
                    <Route path="/about" element={<About />}>
                        <About />
                    </Route>
                </Routes>
            </div>
        </Router>
    )
}

export default NavbarComp

when i remove the routes, the navbar is actually being shown. I'm not sure what I could possibly be doing wrong.

CodePudding user response：

I just realized that the Route tag ends within itself so I needed to change my route to:

<Route path="/home" element={<Home />} />

CodePudding user response：

My guess here is that there's an error in the console regarding trying to render a non-Route component as a child of a Route component.

<Routes>
  <Route path="/home" element={<Home />}>
    <Home /> // <-- invalid
  </Route>
  <Route path="/about" element={<About />}>
    <About /> // <-- invalid
  </Route>
</Routes>

Remove the invalid children components.

<Routes>
  <Route path="/home" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>