White blank screen using React Router

[onlyfortestweb]

I am use React Router for my web app, it will build successful but its just show blank white screen. Any body help to fix it. App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css';
import Home from './Pages/Home.jsx';

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Route exact path="/" Component={Home}/>
        </div>
      </Router>
    );
  }
}

export default App;

Home.jsx Code

import React, { Component } from 'react';


class Home extends Component{
    render(){
        return(
            <div>
                <h2>Welcome</h2>
                <p>xc.b nldfgjkln ;fngd golnldf ng</p>
            </div>
        );
    }
}

export default Home;

[meerbex]

Have you found a solution for this issue? I am also having the same propbelm. It works perfectly If I am not using router components

[geowasim]

I see typeo in App.js <Route exact path="/" Component={Home}/> // it should be component(small)

[Imen-Frigui]

am facing the same problem any solution?

[rezasanjari]

use this:

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

<Routes>
  <Route exact path="/" element={<Home/>} />
</Routes>

[vivekmodi1301]

Thanks this helped me. I used element instead of component.

[betu55]

I am having the same problem. I used the same import but still nothing.

[abdrzqsalihu]

Please I need help with this also

[devesh911]

i think the problem is arrising from components itself , i am using a arrow function export component changed to simple rfc

[betu55]

This worked for me:

https://stackoverflow.com/questions/71972523/navlink-link-from-react-router-dom-not-working-blank-screen/71992282#71992282

On Sun, Jul 3, 2022 at 10:52 AM devesh911 @.***> wrote:

i think the problem is arrising from components itself , i am using a arrow function export coit mponent changed to simple rfc

— Reply to this email directly, view it on GitHub https://github.com/vuejs-templates/webpack/issues/1493#issuecomment-1173105608, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOWDIYDN3X5CBN6AGVZXINLVSGSLZANCNFSM4HD3NVKQ . You are receiving this because you commented.Message ID: @.***>

[nithiyashree22]

Have you found a solution for this issue? I am also having the same propbelm. It works perfectly If I am not using router components

I uninstalled the current version and installed the old one by using this command
npm install react-router-dom@5 and things were solved.. dont have to use routes in the place of switch , can add multiple element components in one tag..

[betu55]

check out this thread:

https://stackoverflow.com/questions/71972523/navlink-link-from-react-router-dom-not-working-blank-screen/71992282#71992282

[betu55]

try updating npm also

[nithiyashree22]

latest

try updating npm also

the latest react router dom is unstable.. the prev version works fine

[River-Child]

Something should be done about this, no solution works. People's futures depend on things like this. Doing a Mern stack project to apply for a job and all I am seeing is blank pages

[albedim]

Guys, If you really wanna fix this. The only way is this. Install the old version 😄

[betu55]

Sorry this is as far as I can help.

I haven't been doing react for some time now.

On Wed, Jul 20, 2022 at 3:39 AM nithiyashree22 @.***> wrote:

latest

try updating npm also

the latest react router dom is unstable..

— Reply to this email directly, view it on GitHub https://github.com/vuejs-templates/webpack/issues/1493#issuecomment-1189935791, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOWDIYFGGPAWOQDVPHJUTJDVU6UKNANCNFSM4HD3NVKQ . You are receiving this because you commented.Message ID: @.***>

-- Bemenet S. Bekele (he/him) Toronto, ON.

[ghost]

Below Link is working fine this is the router version issue , problem will resolve after follow below link instruction with latest Router version.

https://stackoverflow.com/questions/71972523/navlink-link-from-react-router-dom-not-working-blank-screen/71992282#71992282

Thanks Regards Rameez Jaffri

[ak0024]

import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom";

import "./index.css"; import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode> );

do this in index.js