React Router 不渲染组件

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

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

Answer 2

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.