React Router not rendering components

Question

My React Router doesn't render my components. But they're accessable through hard refresh. It changes the URL and everything but nothing shows up before i hit F5.

It worked fine when i had everything in one components but then i tried splitting it into couple components and now everything works beside rendering the content in the different pages.

What am i doing wrong?

In the index.js i have wrapped in .

App.js

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";

// Components
import Navigation from "./components/NavBar/NavBar";
import Content from "./components/Routing/Routing";

// Styling
import "./assets/sass/App.scss";

// Components

function App() {
  return (
    <Router>
      <Navigation />
      <Content />
    </Router>
  );
}

export default App;

Routing.js

import React, { Component } from "react";
import { BrowserRouter as Switch, Route } from "react-router-dom";

// Pages
import Home from "../../pages/Home";
import Virksomheder from "../../pages/Virksomheder";
import Login from "../../pages/Login";

class Routing extends Component {
  render() {
    return (
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/login" component={Login} />
        <Route path="/virksomheder" component={Virksomheder} />
      </Switch>
    );
  }
}

export default Routing;

NavBar.js

import React from "react";
import { NavLink } from "react-router-dom";

import "./NavBar.scss";

const NavBar = () => {
  return (
    <header>
      <nav class="navigation-bar">
        <NavLink exact to="/">
          <div className="logo"></div>
        </NavLink>
        <div className="search-bar">
          <input type="text" placeholder="Søg efter virksomhed..." />
        </div>
        <ul class="menu-list">
          <li className="nav-item">
            <NavLink to="/" activeClassName="current-menu-item">
              NPS.Today
            </NavLink>
          </li>
          <li className="nav-item">
            <NavLink to="/login" activeClassName="current-menu-item">
              Login
            </NavLink>
          </li>
          <li className="nav-item btn">
            <NavLink to="/virksomheder" activeClassName="current-menu-item">
              Til Virksomheder
            </NavLink>
          </li>
        </ul>
      </nav>
    </header>
  );
};

export default NavBar;

Answer 1

Index.js

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';
import { ProductProvider } from './context';

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


App.js

    import React from "react";
    import { Switch, Route } from "react-router-dom";
    
    // Components
    import Navigation from "./components/NavBar/NavBar";
    import Content from "./components/Routing/Routing";
    
    // Styling
    import "./assets/sass/App.scss";
    
    // Components
    
    function App() {
      return (
        <Switch>
         <Route path='/navigation' component={Navigation} />
         <Route path='/content' component={Content} />
        </Switch>
      );
    }

i think rest of the code seem well bro, hope that this will help you out.

Answer 2

problem is in your Routing file, you have imported BrowserRouter as Switch as opposed to importing Switch just replace BrowserRouter as Switch with Switch.. Your code should work.

Your code:

import React, { Component } from "react";
import { BrowserRouter as Switch, Route } from "react-router-dom";

// Pages
import Home from "../../pages/Home";
import Virksomheder from "../../pages/Virksomheder";
import Login from "../../pages/Login";

class Routing extends Component {
  render() {
    return (
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/login" component={Login} />
        <Route path="/virksomheder" component={Virksomheder} />
      </Switch>
    );
  }
}

export default Routing;

After change:

import React, { Component } from "react";
import { Switch, Route } from "react-router-dom";

// Pages
import Home from "../../pages/Home";
import Virksomheder from "../../pages/Virksomheder";
import Login from "../../pages/Login";

class Routing extends Component {
  render() {
    return (
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/login" component={Login} />
        <Route path="/virksomheder" component={Virksomheder} />
      </Switch>
    );
  }
}

export default Routing;

For quick reference : https://reactrouter.com/web/guides/quick-start