Question

我的React Router不渲染我的组件。但是可以通过硬刷新访问它们。它更改了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;

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

问题出在您的Routing文件中，您已导入BrowserRouter as Switch，而不是导入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>
      );
    }

我认为其余代码似乎不错，希望这对您有所帮助。

React Router不渲染组件

2 个答案: