Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>,
document.getElementById('root')
);
App.js
import React from 'react';
import { Routes, Route } from "react-router-dom";
import Main from './Pages/Home/Main.js';
import NotFound from './Helpers/NotFound.js';
function App() {
return (
<div className="app-routes">
<Routes>
<Route path="/">
<Main />
</Route>
<Route>
<NotFound />
</Route>
</Routes>
</div>
);
}
export default App;
Main.js
import React from 'react';
import './main.css';
function Main(){
return (
<div className="main-content">
<h1>This is the Main Page</h1>
</div>
);
}
export default Main;
Definitely not a component import issue tested without routes and works perfectly but when I add routes or even just route by itself nothing will render. I have react-router-dom v.6 installed
React-router v6 api has changed. you need to use element prop to render a component.
<Routes>
<Route path="/" element={<Main>} />
<Route path="/custom" element={<div>custom</div>} />
<Route path="*" element={<NotFound />}>
</Routes>
react-router-dom@6 uses element property in the route to display the component
To display not found page use path ="*" and add it the end of all the routes so whenever routes don't match I goes to the not found (404)page.
<Routes>
<Route path="/" element={<Main />}/>
//all your routes here
<Route path="*" element={ <NotFound />}/> //in the last
</Routes>