Why I receive blank page? React-CodePudding

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 Wallet() {
  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 mistake?

CodePudding user response：

It looks like you are using react-router-dom V6 which doesn't support 'exact' keyword. If you remove that it should work.

CodePudding user response：

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>