ReactJs,BootStrap,RouterDom - reactjs

Question

Hello cannot under stand how its work with this import and routes i created a navbar , created couples of pages like videolectures , so i create a router (link) to the videolectures page but then i press from main page there is a navbar displayed on VideoLecture i get white screen and its nothing going on display NavBar is gone i also try to write some code inside a VideoLecture page but its still not going to dislpay anyway CodeBelow
NavBar.js
import React from 'react';
import {Navbar,Nav,Container} from 'react-bootstrap';
import {Routes, Route, Link} from "react-router-dom";
import logo from '../img/logo1.jpg';
import Videolectures from '../pages/videolectures'
export default function NavBar() {
return(
<div>
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Container>
<img
src= { logo }
width="35"
height="35"
className="d-inline-block align-top rounded-circle"
alt = ""
href= "#home"
/>
<Navbar.Brand>React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link as={Link} to="/videolectures">VideoLectures</Nav.Link>
<Nav.Link href="#pricing">Questions</Nav.Link>
</Nav>
<Nav>
<Nav.Link href="#deets">Login</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Sing Up
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<Routes>
<Route path="/videolectures" element={<Videolectures/>}/>
</Routes>
</div>
);
}
app.js
import NavBar from './components/navbar';
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<NavBar/>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import {BrowserRouter,Route,Routes} from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route path="/" element={ <App/> }>
</Route>
</Routes>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
VideoLecture.js
import React from 'react';
import {Card,Button} from 'react-bootstrap';
export default function Videolectures() {
return(
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
);
}
I also get messsage from web console
index.tsx:25 You rendered descendant <Routes> (or called `useRoutes()`) at "/" (under <Route path="/">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.
Please change the parent <Route path="/"> to <Route path="*">.
warning # index.tsx:25
index.tsx:25 No routes matched location "/videolectures"

Answer 1

Try to move the BrowserRouter initialization in the App component and add to it also the /videolectures Route.
Also change the / route element to NavBar:
function App() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<NavBar />}></Route>
<Route path='/videolectures' element={<Videolectures />} />
</Routes>
</BrowserRouter>
);
}
export default App;
Of course, you will need to change the index.js back to
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);