CODEWITHSUNDEEP
javascriptreactjsreact-router
Kacper
Kacper

Reputation: 41

Why I receive blank page? React

I have been learning React for few days and I wrote simple project (single page application). Problem is that my page doesn't show anything - it's a blank page.

App.js

import './App.css';
import {BrowserRouter as Router,Routes,Route,} from "react-router-dom";
import { Home } from './components/Home';
import { Wallet } from './components/Wallet';


function App() {
  return (
      <Router>
        <Routes>
          <Route exact path="/" component={Home}/>
          <Route path="/wallet" component={Wallet}/>
        </Routes>
      </Router>
  );
}

export default App;

Wallet.js

import React from "react";

export function Wallet() {
  return (
    <div>
      <h1>Wallet Page!</h1>
    </div>
  );
}

Home.js

import React from "react";

export function Home() {
  return (
    <div>
      <h1>Home Page!</h1>
    </div>
  );
}

So when I go to http://localhost:3001/ or http://localhost:3001/wallet I receive blank page. Could someone point me where I made a mistake?

Upvotes: 1

Views: 2218

Answers (1)

Drew Reese
Drew Reese

Reputation: 203512

In react-router-dom@6 the Route components render the routed content on the element prop as a ReactNode, i.e. as JSX. There is no longer any component, or render and children function props.

Routes and Route

declare function Route(
  props: RouteProps
): React.ReactElement | null;

interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactNode | null;
  index?: boolean;
  path?: string;
}

Move the components into the element prop and pass them as normal JSX instead of as a reference to a component.

<Router>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/wallet" element={<Wallet />} />
  </Routes>
</Router>

Upvotes: 4

Related Questions