CODEWITHSUNDEEP
reactjsreact-router
Daniel Radosa
Daniel Radosa

Reputation: 81

React router displays blank page

I've made a new subpage for my app and when I try rendering components specifically witout router it all works. But when I add router so I am able to switch between pages by it just displays blank page. Not even my other components.

Here is a code of my App.jsx:

import React from "react";

import Home from "./Home";
import Markets from "./Markets";

import { Navbar, Footer, Services, Transactions } from "./components";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => {
  return (
    <Router>
      <div className="min-h-screen">
        <div className="gradient-bg-welcome">
          <Navbar />
          <Switch>
            <Route path="/" component={<Home />} />
            <Route path="/Markets" component={<Markets />} />
          </Switch>
        </div>
        <Services />
        <Transactions />
        <Footer />
      </div>
    </Router>
  );
};

export default App;

Upvotes: 1

Views: 288

Answers (2)

Dharmik Patel
Dharmik Patel

Reputation: 1201

In version 6 of react-router switch is replaced by routes.

Note:- routes can only have route within them.

import React from "react";

import Home from "./Home";
import Markets from "./Markets";

import { Navbar, Footer, Services, Transactions } from "./components";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

const App = () => {
  return (
    <Router>
      <div className="min-h-screen">
        <div className="gradient-bg-welcome">
          <Navbar />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/Markets"element={<Markets />} />
          </Routes>
        </div>
        <Services />
        <Transactions />
        <Footer />
      </div>
    </Router>
  );
};

export default App;

Upvotes: 1

Drew Reese
Drew Reese

Reputation: 202605

react-router-dom@6 doesn't export a Switch component. It was replaced by the Routes component. Switch Switch component to Routes component and render the routed components on the element prop.

Example:

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

const App = () => {
  return (
    <Router>
      <div className="min-h-screen">
        <div className="gradient-bg-welcome">
          <Navbar />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/Markets" element={<Markets />} />
          </Routes>
        </div>
        <Services />
        <Transactions />
        <Footer />
      </div>
    </Router>
  );
};

Upvotes: 1

Related Questions