Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React Routes not Rendering Components

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.

Tags:

3

Answers


  1. 0

    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;
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search