React Routes not Rendering Components

Question

I'm currently working on a React application where I'm using React Router for navigation. However, I'm facing an issue where the components associated with routes are not rendering properly.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from '../components/App';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

document.addEventListener('DOMContentLoaded', () => {
    const rootElement = document.getElementById('root');
    if (rootElement) {
        ReactDOM.render(
            <Router>
                <Routes>
                    <Route path="/" element={<App />} />
                </Routes>
            </Router>,
            rootElement
        );
        document.body.appendChild(document.createElement('div'));
    }
});

App.js

import React from "react"
import {Route, Routes, } from "react-router-dom"
import Gyms from "./Gyms/Gyms"
import Gym from "./Gym/Gym"

const App = () => {
    return (
        <Routes>
            <Route path="/" component={Gyms}/>
            <Route path="/gyms/:slug" component={Gym}/>
        </Routes>
    )
}

export default App;

Gym.js

import React from 'react'

const Gym = () => {
    return <div>This is the Gym#show view for our app.</div>
}

export default Gym

Gyms.js

import React from 'react'

const Gyms = () => {
    return <div>This is the Gyms#index view for our app.</div>
}

export default Gyms

Despite setting up the routes as above, when I navigate to the routes, I'm not seeing the expected components rendering. Instead, I just see a blank page.

Answer 1

There's an issue with your index.js file it seems. I've used basic codesandbox template for react which contains specific index file

import React from "react";
import ReactDOM from "react-dom";

import App from "./app";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

Along with that pass an element as @Puttsche suggested like below

<Route path="/" element={<Gyms/>}/>

And it worked for me. Here's sandbox working example with your code.

Sandbox Link

Answer 2

In React Router v6, the way to specify components for routes has changed. Instead of using the component prop, you now use the element prop and pass the component as JSX.

Here's how you can adjust your App.js to conform to React Router v6 conventions:

import React from "react";
import {Routes, Route } from "react-router-dom";
import Gyms from "./Gyms/Gyms";
import Gym from "./Gym/Gym";

const App = () => {
    return (
        <Routes>
            <Route path="/" element={<Gyms/>}/>
            <Route path="/gyms/:slug" element={<Gym/>}/>
        </Routes>
    );
}

export default App;

Answer 3

I think you could change your code in index.js to :

import {createBrowserRouter, RouterProvider,} from "react-router-dom";
  const router = createBrowserRouter([
 {
   path: "/",
   element: <Gyms/>,

  },
 {
  path:"/gyms/:slugs",
  element:<Gym/>
  }
]);


const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
   <RouterProvider router={router} />
 </React.StrictMode>,
 rootElement
);

Answer 4

In index component:

document.addEventListener('DOMContentLoaded', () => {
    const rootElement = document.getElementById('root');
    if (rootElement) {
        ReactDOM.render(
            <App />,
            rootElement
        );
        document.body.appendChild(document.createElement('div'));
    }
});

In App component:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
const App = () => {
    return (
        <Router>
          <Routes>
              <Route path="/" element={<Gyms />}/>
              <Route path="/gyms/:slug" element={<Gym />}/>
          </Routes>
        </Router>
    )
}