Why is my react component not rendering only when using routes? react-router-domV.6

Question

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

Do you get any error in the console? Check both the browser dev-tools and react-terminal :) — Eric Qvarnström
– Eric Qvarnström, Commented Feb 25, 2022 at 7:03
No errors anywhere, just a white screen loads with no rendered components — Dean Schwartz
– Dean Schwartz, Commented Feb 25, 2022 at 7:06

Nilesh Patel · Accepted Answer · 2022-02-25 07:12:54Z

3

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>

edited Feb 25, 2022 at 7:12

answered Feb 25, 2022 at 7:05

Nilesh Patel

3,3079 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

harshikerfuffle Over a year ago

this is by far the best explanation. I never noticed that even the element prop is being used now. Making this change made my app render. Thanks!

iamdhariot · Accepted Answer · 2022-02-25 07:08:08Z

0

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>

answered Feb 25, 2022 at 7:08

iamdhariot

171 silver badge5 bronze badges

Collectives™ on Stack Overflow

Why is my react component not rendering only when using routes? react-router-domV.6

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related