I'm trying to get the routing to work correctly but whenever I click on my navbar component it does not properly go to the component that's supposed to be rendered by the Route.
There are no errors indicated by React. Just super stuck right now.
import React from 'react';
import Navbar from './components/Navbar';
import Home from './components/Home.js';
import BlankPage from './components/BlankPage';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
function App() {
return (
<>
<Router>
<Navbar/>
<Routes>
<Route path="/" component={Home}/>
<Route path="/blankpage" component={BlankPage}/>
</Routes>
</Router>
</>
);
}
export default App;
In react-router-dom v6, there is no component param in Route, you need to pass your route components as elements of the Route, with rendering the component rather than just passing the reference
Change from this
<Route path="/" component={Home}/>
<Route path="/blankpage" component={BlankPage}/>
To this below
<Route path="/" element={<Home />}/>
<Route path="/blankpage" element={<BlankPage />}/>
Reference react-router-dom v6 Official Docs
Route - An object or Route Element typically with a shape of
{ path,element }or<Route path element>. The path is a path pattern. When the path pattern matches the current URL, the element will be rendered.