CODEWITHSUNDEEP
reactjsreact-router
Sam
Sam

Reputation: 1

React Router not loading component

I am relatively new to React and can't for the life of me figure out why this isn't working!

This code is not loading the App component inside router, but it does when returned independently. Example below

import React from "react";
import ReactDOM from "react-dom";
import App from "../components/App";
import { Router, Route } from "react-router-dom";
document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    <Router>
      <Route path="/">
        <App />
      </Route>
    </Router>,
    document.body.appendChild(document.createElement("div"))
  );
});

Nothing loads on the screen with this. However when I remove the router I see the App component load:

import React from "react";
import ReactDOM from "react-dom";
import App from "../components/App";
import { Router, Route } from "react-router-dom";
document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    <App />,
    // <Router>
    //   <Route path="/">
    //     <App />
    //   </Route>
    // </Router>,
    document.body.appendChild(document.createElement("div"))
  );
});

Finally, this is my App component (dont think you need this though)

import React from "react";

const App = () => {
  return <div>app has loaded</div>;
};
export default App;

This is built on a Ruby on Rails app, if that matters

Upvotes: 0

Views: 1002

Answers (5)

Taiye Ige
Taiye Ige

Reputation: 1

If you have followed all the steps, then the answer may just be that you installed the NPM package in the wrong place.

Make sure it is in your project folders JSON file. Considering you're new to React it is pretty easy to install packages in the wrong place.

Upvotes: 0

Pranava Mohan
Pranava Mohan

Reputation: 631

Fixed:

import React from "react";
import ReactDOM from "react-dom";
import App from "../components/App";
import { Router, Route, Switch } from "react-router-dom";
document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    <Router>
      <Switch>
          <Route exact path="/">
            <App />
          </Route>
      </Switch>
    </Router>,
    document.body.appendChild(document.createElement("div"))
  );
});

Upvotes: 0

Erwin Ramadhan
Erwin Ramadhan

Reputation: 402

if you'are using react-router-dom v5:

import React from "react";
import ReactDOM from "react-dom";
import App from "../components/App";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    <Router>
      <Switch>
         <Route path="/">
            <App />
         </Route>
      </Switch>
    </Router>,
    document.body.appendChild(document.createElement("div"))
  );
});

if you're using react-router-dom v6

import React from "react";
import ReactDOM from "react-dom";
import App from "../components/App";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    <Router>
      <Routes>
         <Route path="/" element={<App />} />
      </Routes>
    </Router>,
    document.body.appendChild(document.createElement("div"))
  );
});

Upvotes: 1

Jason Goemaat
Jason Goemaat

Reputation: 29204

What versions of react and react-router-dom are you using? This works for me in a fresh npx create-react-app:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter, Routes, Route } from "react-router-dom"; // BrowserRouter as Router
document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    <div>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />} />
        </Routes>
      </BrowserRouter>
    </div>,

    document.body.appendChild(document.createElement("div"))
  );
});

Upvotes: 0

POLAKv93
POLAKv93

Reputation: 109

Instead of

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

try

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

Upvotes: 0

Related Questions