react-router-bootstrap: Can't Resolve react-router-dom

Have you tried installing react-router-dom

did you install react, react-dom, react-router-dom?

If not, npm i react react-dom react-router-dom

@princecharming519 , I assume you’re using docker. If so, drop your images and recreate them. This solved my problem.

@babusng with the level of details you provided it’s impossible to help you to resolve the issue.

My suggestion is to run npm install react-router-dom (or yarn add react-router-dom if you’re using Yarn). Then check that the import is referencing package name, not path (i.e., it should be require('react-router-dom'), not require('./react-router-dom'))

Actually I just now got it to work. You were right that is what it needed but the import is like this, import { BrowserRouter as Router, Route } from 'react-router-dom';

Thanks for your help. Is there docs anywhere explaining this?

try this way too , it will work

@wuno glad that you managed to resolve the issue you had.

Have a look at react-router’s installation guide, which has a note about packages that should be used for development. You’d never reference react-router directly in your web application because react-router-dom is supposed to be used instead.

Did you try to restart dev server?

@princecharming519 , I assume you’re using docker. If so, drop your images and recreate them. This solved my problem.

Wasted so much time with this 🤦‍♂️

I got the same error when using create-react-app with Ruby on Rails. Turned out that after initialization, all the packages are installed under /client folder. I need to cd client before running yarn add react-dom react-router-dom so that the server can correctly find the packages.

just install react-router-dom with --save and you are good to go

Here is the code:

I got the same kind of error. Please how can I fix this as I am new to react?

I got the same error when using create-react-app with Ruby on Rails. Turned out that after initialization, all the packages are installed under /client folder. I need to cd client before running yarn add react-dom react-router-dom so that the server can correctly find the packages.

In my case i used “yarn add react-router-dom” yarn and it worked perfectly but "npm i react-router-dom --save " was not working.

@lopezdp this has nothing to do with react-router-bootstrap. Please check the structure of your project and paths of the files you’re referencing in your imports.

You’re right! I totally had it in the wrong directory! Sorry about the inconvenience and thanks for taking a look!

@lopezdp this has nothing to do with react-router-bootstrap. Please check the structure of your project and paths of the files you’re referencing in your imports.

I am dealing with this same issue on two new projects I have just started and I have it configured the way I have it on another in production and for some reason I can’t seem to find the bug here.

Here are my dependencies in my package.json:

"dependencies": {
    "react": "^16.8.6",
    "react-bootstrap": "^0.32.4",
    "react-dom": "^16.8.6",
    "react-router-dom": "^4.3.1",
    "react-scripts": "3.0.1"

I have an index.js file where I am wrapping my <App /> component inside of the <Router /> component that I am importing with BrowserRouter as specified from react-router-dom.

Here are the contents of my index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

From there my <App /> component implements a custom <Routes /> component that uses Route and Switch from react-router-dom to handle my app’s routing needs.

Here are the contents of my <App /> component:

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Navbar } from "react-bootstrap";
import Routes from "./Routes.js";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="App container">
        <Navbar fluid collapsOnSelect>
          ...... misc navbar code
        </Navbar>
        <Routes />
      </div>
      );
  }
}

export default App;

This is what my Routes.js file looks like and how it uses the Route and Switch from react-router-dom:

import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./containers/Home";

export default () => <Switch>
                       <Route path="/" exact component={ Home } />
                     </Switch>;

Here is the { Home } component that I am trying to serve up locally:

import React, { Component } from "react";
import "./Home.css";

export default class Home extends Component {
  render() {
    return (
      <div className="Home">
        <div className="LandingPage">
          ... random html code
        </div>
      </div>
      );
  }
}

And finally here is the error:

What do you think could be the problem here??? Thanks !

wow! thanks man. its been resolved