React Router 不渲染组件

Question

我的 React Router 不渲染我的组件。 但是它们可以通过硬刷新访问。 它更改了 URL，但在我按下 F5 之前没有显示任何内容。

当我将所有内容都放在一个组件中时，它工作得很好，但后来我尝试将其拆分为几个组件，现在除了在不同页面中呈现内容之外，一切都可以正常工作。

我究竟做错了什么？

在 index.js 中，我已将 .

应用程序.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;

路由.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;

导航栏.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

问题出在您的Routing文件中，您已将BrowserRouter as Switch导入，而不是导入Switch只需将BrowserRouter as Switch替换BrowserRouter as Switch Switch .. 您的代码应该可以工作。

您的代码：

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;

更改后：

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;

快速参考： 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>
      );
    }

我认为其余的代码看起来不错兄弟，希望这会帮助你。