react-router-dom loading blank page despite attempted solutions from other questions

enitdev 0
Viewed 25

I've read through 20+ questions regarding the same issue but none of the suggestions have helped, frustration is kicking-in!

I'm creating a fullstack MERN project and i simply need to create routes for index and Admin pages. When i add routing everything results in a blank (white) page with no console errors.

I've tried importing root and 'as' and i've tried BrowserRouter, HashRouter, Router plus i've tried using both components and elements.

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

As App will be my homepage i've created a Routing.js to which Index.js is pointing to.

import Routing from "./Routing";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Routing />
  </React.StrictMode>
);

In my Routing.js it looks like this

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import App from "./App";
import Admin from "./Admin";

function Routing() {
  <BrowserRouter>
    <Routes>
      <Route path="/" element={App} />
      <Route path="/admin" element={Admin} />
    </Routes>
  </BrowserRouter>;
}
export default Routing;
react-router-dom react-router reactjs javascript
2 Answers

Using this way it is scalable and maintainable. If you don't have a specific purpose for Routing a root component.


import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));


root.render(
  <React.StrictMode>
    <BrowserRouter>
       <App />
    </BrowserRouter>
  </React.StrictMode>
);
Omor Faruk0

i think got your issue-

<Route path="/" element={<App/>}/>
<Route path="/admin" element={<Admin/>}/>

Just change above route with above, you may got what you want. If you still face any issue further, lemme know i will try to solve it. Thanks

Varun Kaklia0
Related