Routing is not working using react-router-dom-v6.4.2-CodePudding

Intro

I had created a react starter application

Problem

I had created a 3 components in /src/pages named AddCoupon, Addvertical, Addmetadata. Now then I created a file Routes.js in /src.

Routes.js

import React from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";
import AddCoupon from './pages/addCoupon';
import AddMetadata from './pages/addMetadata';
import AddVertical from './pages/addVertical';
import Login from './pages/login';


const Routes = () => {
    return (
        <>
            <Router>
                <Switch>
                    <Route path="/addcoupon">
                        <AddCoupon />
                    </Route>
                    <Route path="/addmetadata">
                        <AddMetadata />
                    </Route>
                    <Route path='/addvertical'>
                        <AddVertical />
                    </Route>
                    <Route path="/">
                        <Login />
                    </Route>
                </Switch>
            </Router>
        </>
    )
}

export default Routes

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router >
      <App />
    </Router>
  </React.StrictMode>
);


reportWebVitals();

What I want?

So basically what I want is that when I type http:localhost:3000/addcoupon, it should render AddCoupon Component and same for other 2 components but right now it's showing nothing.

I dont want to use any navbar. What I want is simply when I hit the endpoints mentioned in Route.js, it should render that component.

CodePudding user response：

Router 6 uses different syntax compared to earlier versions. Please check out the documentation: https://reactrouter.com/en/v6.3.0/getting-started/overview

For your particular case, you need to remove switch, and pass element to route, and wrap all Route elements in Routes element, like so:

const Routes = () => {
    return (
        <>
            <Routes>
                <Route path="/addcoupon" element={<AddCoupon />}/>
                <Route path="/addmetadata" element={<AddMetadata />}/>
                <Route path='/addvertical' element={<AddVertical />}/>
                <Route path="/" element={<Login />}/>
            </Routes>
        </>
    )
}

In order for routes to work, you also need to wrap App element in Router element, like below:

import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import './styles/index.scss'

ReactDOM.render(
   <Router>
      <App />
   </Router>,
   document.getElementById('root')
)

Final step, render Routes inside of App element or wherever you want to use it:

const App = () => {
   return <Routes/>
}