Reactjs 不渲染组件

我的React路由器不渲染我的组件。但它们可以通过硬刷新访问。它改变了URL和所有内容，但在我点击F5之前什么也没有显示

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

我做错了什么

在index.js中，我加入了

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;

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router}；
//组成部分
从“/components/NavBar/NavBar”导入导航；
从“/components/Routing/Routing”导入内容；
//造型
导入“/assets/sass/App.scss”；
//组成部分
函数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;

import React，{Component}来自“React”；
从“react router dom”导入{BrowserRouter as Switch，Route}；
//页数
从“../../pages/Home”导入主页；
从“../../pages/Virksomheder”导入Virksomheder；
从“../../pages/Login”导入登录名；
类路由扩展组件{
render（）{
返回(
);
}
}
导出默认路由；

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;

从“React”导入React；
从“react router dom”导入{NavLink}；
导入“/NavBar.scss”；
常量导航栏=（）=>{
返回(


今天


登录


蒂尔维克索姆海德


);
};
导出默认导航栏；

问题在于您的

路由

文件中，您已经导入了

浏览器路由器作为交换机

，而不是导入

交换机

只需将

浏览器路由器作为交换机

替换为

交换机

。。你的代码应该可以工作

您的代码：

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}来自“React”；
从“react router dom”导入{BrowserRouter as Switch，Route}；
//页数
从“../../pages/Home”导入主页；
从“../../pages/Virksomheder”导入Virksomheder；
从“../../pages/Login”导入登录名；
类路由扩展组件{
render（）{
返回(
);
}
}
导出默认路由；

变更后：

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;

import React，{Component}来自“React”；
从“react router dom”导入{Switch，Route}；
//页数
从“../../pages/Home”导入主页；
从“../../pages/Virksomheder”导入Virksomheder；
从“../../pages/Login”导入登录名；
类路由扩展组件{
render（）{
返回(
);
}
}
导出默认路由；

快速参考：

Index.js
从“React”导入React；
从“react dom”导入react dom；
//导入“./index.css”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
从“react Router dom”导入{BrowserRouter as Router}；
从“./context”导入{ProductProvider}；
ReactDOM.render(
,
document.getElementById（'root'））
);    
App.js
从“React”导入React；
从“react router dom”导入{Switch，Route}；
//组成部分
从“/components/NavBar/NavBar”导入导航；
从“/components/Routing/Routing”导入内容；
//造型
导入“/assets/sass/App.scss”；
//组成部分
函数App（）{
返回(
);
}

---

我认为代码的其余部分似乎很好，兄弟，希望这能帮助你。

这很好！谢谢我是如此接近，哈哈！

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>
      );
    }