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;

CodePudding user response：

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).

Routes and Route

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>

CodePudding user response：

Install npm i [email protected] To work with switch