I am using React Router v6 but my routing is not happening-CodePudding

Here is my code:

import React, { Component } from 'react'
import Navbar from './components/Navbar'
import News from './components/News'
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";

export default class App extends Component {
  render() {
    return (
      <div>
        
        <BrowserRouter>
        <Navbar/>
        <Routes>
        <Route path="/" element={<News Key=":general" pageSize={15} country="in" category= "general"/>} />
        <Route end path="/business"element={<News Key=":business" pageSize={15} country="in" category= "business"/>} />
        <Route path="/entertainment" element={<News Key=":entertainment" pageSize={15} country="in" category= "entertainment"/>} />
        <Route path="/general" element={<News Key=":general" pageSize={15} country="in" category= "general"/> }/>
        <Route path="/health" element={<News Key=":health" pageSize={15} country="in" category= "health"/>} />
        <Route path="/science" element={<News Key=":science" pageSize={15} country="in" category= "science"/>} />
        <Route path="/sports" element={<News Key=":sports" pageSize={15} country="in" category= "sports"/>} />
        <Route path="/technology" element={<News Key=":technology" pageSize={15} country="in" category= "technology"/>} />
        
        </Routes>
        </BrowserRouter>
      </div>
    )
  }
}

CodePudding user response：

your import should be like this :

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

and use the Router instead of BrowserRouter

also add exact keyword inside every route before the path

CodePudding user response：

Hopefully the preceding answer fixes things for you. If it doesn't, I do recall a colleague at another company in Silicon Valley telling me about 6 months ago that they tried upgrading to React Router v6 but it just didn't work for them so that had to revert back to v5.