React router displays blank page

user_10536824 0
Viewed 56

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;
react-router reactjs
2 Answers

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;
user_104982560

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>
  );
};
user_86908570
Related