react router and routes is not working , i could not able to navigate to blogs page . App.js - the following code snippet contains the App.js and the router . i could not use switch due to the latest version of react js .
import './App.css';
import React,{Component} from 'react';
import { Navbar,Nav,Container,Row,Col,Button } from 'react-bootstrap';
import {Navigation} from './navbar/navbar.js';
import Luckywheel from './luckywheel/luckywheel';
import Luckymessage from './luckywheel/luckymessage';
import {Routes , Route , BrowserRouter as Routers} from 'react-router-dom'
import Blogs from './tools/blogs';
function App() {
return (
<div className="App">
<h1 className='heading'>LUCKY DRAWER</h1>
<Routers>
<Navigation />
<Luckywheel />
<Luckymessage />
<Routes>
<Route path='blogs' component={Blogs} />
<Route path='/' exact component={App} />
</Routes>
</Routers>
</div>
);
}
export default App;
Navbar.js - this file contains the navigation bar code
import React ,{Component} from 'react';
import { Navbar,Nav,Container,NavDropdown, } from 'react-bootstrap';
export function Navigation () {
return(
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand href='blogs'>Blogs</Navbar.Brand>
<Navbar.Brand href='/'>Home</Navbar.Brand>
</Container>
</Navbar>
)
}
export default Navigation;
In react-router-dom v6 the Route component API changed significantly. It no longer takes component or render or children function props, all replaced by a single element prop that takes a ReactElement (a.k.a. JSX).
declare function Route( props: RouteProps ): React.ReactElement | null; interface RouteProps { caseSensitive?: boolean; children?: React.ReactNode; element?: React.ReactElement | null; index?: boolean; path?: string; }
Swap from component to element prop and pass the routed component as JSX.
<Routes>
<Route path='blogs' element={<Blogs />} />
<Route path='/' element={<App />} />
</Routes>
Install npm i react-router-dom@5.2.0 To work with switch