Nothing is rendering when I implement routing but if I render in separate components it renders

user_14527445 0
Viewed 53

When I try to route and use the components it does not render anything.

Whereas when I try to render all the components individually then it is getting rendered. So the problem is not with the problem I feel.

This is the code for app.js

import Home from "./pages/home/Home";
import Header from "./components/header";
import Contact from "./pages/contact/Contact";
import About from "./pages/about/About";
import { BrowserRouter as Route, Router, Routes } from "react-router-dom";
    
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/contacts" element={<Contact />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}
    
export default App;

This is the code for index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
react-dom react-router-dom react-router reactjs
1 Answers

Issue

You've mixed up some imported components. You've imported the BrowserRouter as Route, and then imported the low-level Router which is missing some required props.

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

Solution

Import BrowswerRouter as Router, remove the extraneous import of Router, and import Route.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
    
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/contacts" element={<Contact />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}
user_86908570
Related