React Router Dom Returns a Blank Page When Going to a Particular Route

react-router-dom v6 Routes showing blank page

In react-router-dom@6 the Route components don't render routed content as children, they use the element prop. Other Route components are the only valid children of a Route in the case of building nested routes.

export default function WebRoutes() {
  return (
    <Routes>
      <Route path='/' element={<Welcome />} />
    </Routes>
  );
}

Ensure that you have rendered a router around your app.

import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <WebRoutes />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

React Router Dom returns a blank page when going to a particular route

You can not access data directly like this. If you set a state property named data, you have to access it using this.state.data in the render() function.

this.state.data.map(item => {
    ...
});

Another issue you might face is that the componentDidMount function is triggered after a first render of the component (see React componentDidMount()) which means that you will access data in render() before it is created and use map on an undefined value.

I suggest you either use componentWillMount() or create the data property in a constructor like so:

constructor(props) {
    super(props);

    this.state = { data: [] };
}

React-router-dom showing blank screen

This is a react@18 change in how React apps are rendered. createRoot takes a DOMNode reference, not JSX. Once the root is created, then you can call a render method on it.

Example:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

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

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

See react-dom-client for more in-depth detail.

React router v6 experiencing blank page on routes

In react-router-dom@6 the Route component API/syntax changed significantly. The element prop takes a ReactNode, a.k.a. JSX. Pass the React components as JSX.

Example:

<BrowserRouter basename={process.env.PUBLIC_URL}>
  <Routes>
    <Route element={<TierA />} path="/a_tier" />
    <Route element={<TierB />} path="/b_tier" />
    <Route element={<Catalogue />} path="/catalogue" />
    <Route element={<Admin />} path="/admin" />
    <Route element={<NotFound />} path="*" /> 
  </Routes>
</BrowserRouter>

React Router Dom routes are returning blank pages

I assume you are using React Router Dom v6 since you are using Routes instead of Switch, in which case it should be element not component the propriety where you pass that component for that route. Also call the component when passing it, like so:

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Sidebar from "./components/Sidebar";
import Dash from "./pages/Dash";
import Prof from "./pages/Prof";

function App() {
  return (
    <Router>
      <Sidebar />
      <Routes>
        <Route path="/" exact element={<Dash />} />
        <Route path="/profile" exact element={<Prof />} />
      </Routes>
    </Router>
  );
}
export default App;

React Route shows blank page

Route can only be child of Routes. Try adding Routes as parent like below and you should see WelcomeComponent loading up.

render() {
    return (
      <div className="TodoApp">
        <Router>
          <Routes>
            <Route path="/" element={<WelcomeComponent />} />
          </Routes>
        </Router>
      </div>
    );
  }

Getting blank page on using Route | React

import './App.css';
import Navbar from './components/Navbar';
import HomeScreen from './screens/HomeScreen'
mport { BrowserRouter, Routes, Route} from 'react-router-dom'

function App() {
  return (
    <div className="App">
      <Navbar/>
      <BrowserRouter>
         <Routes>
           <Route path='/home' element={<HomeScreen/>} />
         </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

The bit that wasnt working was where you defined your element so change

 <Route path='/home' exact component={HomeScreen} />

to this

 <Route path='/home' element={<HomeScreen/>} />

---

Related Topics