react-router-dom all routes are not working

July 15, 2022

I am new to reactjs.
I am trying to use react-router-dom but it doesn’t work.
Please help. or could you give me a hint? I have no idea about what can I do.

I am only uploading a code of NotFound.js in routes but all of them are not working.

    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

app.js

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

import Top from './Top';
import Main from './Main';
import Half from './Shop';
import NotFound from './NotFound';

function App() {
    return (
        <div className="App">
            <BrowserRouter>
            <Top />
                <Routes>
                    <Route path="" component={<Main />} />
                    <Route path="shop" component={<Shop />} />
                    <Route path="*" component={<NotFound />} />
                </Routes>
            </BrowserRouter>
        </div >
    );
}

export default App;

NotFound.js

import React from 'react';

function NotFound() {
    return (
        <div className="404">
            Page Not Found
        </div>
    )
}
export default NotFound;

>Solution :

Since RRDv6, the Route component takes an element prop instead of component to render the corresponding JSX element for each path:

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

import Top from './Top';
import Main from './Main';
import Half from './Shop';
import NotFound from './NotFound';

function App() {
    return (
        <div className="App">
            <BrowserRouter>
            <Top />
                <Routes>
                    <Route path="/" element={<Main />} />
                    <Route path="/shop" element={<Shop />} />
                    <Route path="*" element={<NotFound />} />
                </Routes>
            </BrowserRouter>
        </div >
    );
}

export default App;