CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
Shirley Cohen
Shirley Cohen

Reputation: 119

React Router V6 shows blank page

I am facing a problem. I am trying to use React Router but it keeps showing me a blank page. Here is my code:

App.js:

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HomePage from "./HomePage";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
      </Routes>
    </Router>

  );
};

export default App;

HomePage.js:

import React from "react";
import {withRouter} from "react-router-dom"

const HomePage = () => {

    return <div>hi</div>
}

export default HomePage;

index.js:

import React from "react";
import ReactDom from "react-dom";
import App from './App';


ReactDom.render(<App/>, document.getElementById("root"))

I've installed "React Router V6", can anyone tell me what is the problem? Thanks for all the helpers.

Upvotes: 8

Views: 18636

Answers (10)

Orwa Ogwari
Orwa Ogwari

Reputation: 161

Change your index.js because it doesn't have a router. It should look something like this.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <App/>
    </Router>
    
  </React.StrictMode>
);

Upvotes: 0

Nishit Nalin
Nishit Nalin

Reputation: 1

I faced a similar kind of issue when introduced react router 6^ version. There was two things to be noticed.

  1. It might be that you have not dicleared a basename in your in your or tags depending on how you import it. For this you can access yopur project on http://localhost:3000 insteed of http://localhost:3000/my-app assuming "my-app" is your application name.

  2. To access your code at http://localhost:3000/my-app the following code snipet can be used where we needed to provide 'basename' prop like basename="/my-app" in the <Router> tag to provide a base URL path for all the locations in the application.

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

function App() {
  return (
    <Router basename="/my-app">
      <Routes>
        <Route path="/" element={<LoginPage />} />
      </Routes>
    </Router>
  );
}

export default App;

Upvotes: 0

Salton
Salton

Reputation: 1

import { Routes,Route } from 'react-router-dom';
import Login from 'components/Login';
import Headerfrom 'components/Header';
    
function App() {
      return (
        <div className="App">
          <Header />
          <Routes>
            <Route exact path='/' element={<Login />} />
          </Routes>
       
       
        </div>
      );
    }
    
    export default App;

Above codes are for App.js file then in index.js it have to look like this

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
  <BrowserRouter>
    <App />
  </BrowserRouter>
  </React.StrictMode>
);

Upvotes: 0

Himanshu Singh
Himanshu Singh

Reputation: 1

you have done a silly mistake. 1 go to package to json is there react-route-dom 2-if not install it in your project folder. you may have created a folder on desktop like npx create-react-app router and after that you had had installed the react-router-dom. just go cd yourprojectname and install.

Upvotes: -1

Hilario Nengare
Hilario Nengare

Reputation: 393

I had the same problem because I was using a (Create React App) CRA generated application and there were older dependencies and one of them was react-router-dom. If that's the case you might need to update your dependencies

npm update

or

yarn upgrade

These commands will update the packages in your project to the latest versions that satisfy the specified version range in your package.json file.

But you can update react-router-dom specifically like so

// Using npm

npm update react-router react-router-dom

or

// Using Yarn

yarn upgrade react-router react-router-dom

Let me know what works cause this gave me a headache too.

Upvotes: 0

Cuong Vo
Cuong Vo

Reputation: 673

I ran into this problem today. After some investigation, I found out that I was install react-router-dom in the parent folder of my ReactJS project.

Something like this "C:\parent_foleder\reactjs_app", you can turn on terminal app, cd into parent_folder, and then ls -a to see if there is any node_moudles, package.json and package-json.lock; if those things existing in parent_folder, just delete them, then cd into your reactjs_app and run npm i react-router-dom again.

Upvotes: -1

TheDev05
TheDev05

Reputation: 196

Same happened with me last night, possibly you have not installed react-router-dom in your project folder, try:

cd [Project Folder name]

npm i react-router-dom

This works for me!

Upvotes: 0

Abiy Menberu
Abiy Menberu

Reputation: 133

I had the exact same issue happen to me a couple of times. My code is exactly similar to yours. Open the package.json file in your project folder and make sure you've installed react-router-dom in the actual project folder and not in its parent folder.

Upvotes: 1

Jerevick
Jerevick

Reputation: 61

I downgraded the react-router-dom package version to ^5... And it worked for me.

Note: Routes is not a method of this version

Upvotes: 1

Muhammed Jasim T k
Muhammed Jasim T k

Reputation: 129

use

import { Route, HashRouter as Router, Routes } from "react-router-dom";

 <Router>
  <Routes>
    <Route exact path="/" element={<Main />} />
    <Route path="/download" element={<Download />} />
  </Routes>
</Router>

Upvotes: 6

Related Questions