CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
Roark
Roark

Reputation: 69

react-router-dom v6 Routes showing blank page

Im routing a page to the root, but its showing up as a blank page, no matter what js file I use. Not sure whats wrong, havent used react since last year but looks like they've updated react-router-dom so it doesnt use Switch anymore. Anyone know the correct syntax so the page shows up? Here are the files:

WebRoutes.js

import React from "react";
import { Routes, Route } from 'react-router-dom';
import { useNavigate } from "react-router-dom";

// Webpages
import App from './App';
import Welcome from './welcome';
import SignUp from './Signup'

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

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import WebRoutes from './WebRoutes';
import reportWebVitals from './reportWebVitals';

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

Upvotes: 2

Views: 2774

Answers (1)

Drew Reese
Drew Reese

Reputation: 202721

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')
);

Upvotes: 6

Related Questions