score:0

you should specify which version of react-router-dom you are using. so i'm just gonna assume, you are using the latest v6.

in your app.js file, you have to make the following changes in order to work:

import { routes, route } from "react-router-dom";
import  'bootstrap/dist/css/bootstrap.min.css';
import pending from './pages/home';
import home from './pages/pending';
    
    export default function app() {
          return (
             <routes>
               <route index path="/" element={<home />}/>
                  <route path="pending" element={<pending />} />  
             </routes>
          );
    }

for more info, please visit the official documentation here!

score:0

import './app.css';

import {   browserrouter as router ,  route, routes } from "react-router-dom";
import header from './components/header';
import footer from './components/footer';

import home from './components/home';
import about from './components/about';


function app() {
  return (
    <>
    <router>
      <header/>
        <routes>
            <route path="/" element={ <home/> } />
            <route path="/about" element={ <about/> } />
        </routes>
      <footer/>
    </router>
    </>
  );
}

export default app;

score:3

issue

the route component api changed in react-router-dom@6. all routed content is now rendered on a single element prop as a reactnode, a.k.a. jsx, not a reference to a react component.

solution

render the routed components as jsx, i.e. <home /> instead of home.

import { browserrouter, routes, route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import pending from './pages/home';
import home from './pages/pending';

export default function app() {
  return (
    <browserrouter>
      <routes>
        <route path="/" element={<home />} />
        <route path="/pending" element={<pending />} /> 
      </routes>
    </browserrouter>
  );
}

Related Query

More Query from same tag