反应路由器不渲染任何东西

Question

使用 react-router-dom 时，我无法渲染任何组件或任何东西。 它所做的只是显示一个白屏，它不会向我的 index.html 模板添加任何内容。 没有任何错误，但它说在 index.js 中有未使用的变量是我的组件。

这是我的代码：

index.js

// Imports
import React from 'react';
import ReactDOM from 'react-dom';
import './css/index.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

import { navbar, footer, home } from './components';

ReactDOM.render(
    <Router>
      <navBar />
      <Routes>
        <Route path="/" element={<home />} />
      </Routes>
      <footer />
    </Router>,
    document.getElementById("root")
);

home.jsx

import React from "react";

function home(){
    return(
        <div className="home">
            <div class="container">
                <div class="row allign-items-center my-5">
                    <div class="col-lg-7">
                        <img class="img-fluid rounded mb-4 mb-lg-0" src="./img/pizza.jpg" alt=""/>
                    </div>
                    <div class="col-lg-5">
                        <h1 class="font-weight-light">cencored</h1>
                        <p>cencored</p>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default home;

navBar.jsx

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

function navBar(){
        return(
            <div className="navBar">
                <nav className="navbar navbar-expand navbar-dar bg-dark">
                    <div className="container">
                        <NavLink className="navbar-brand" to="/"><img src="../img/logo.png" alt="logo" style="width:500px;height:500px;"/></NavLink>
                        <div>
                            <ul className="navbar-nav ml-auto">
                                <li className="nav-item">
                                    <NavLink className="nav-link" to="/menu">Menu</NavLink></li>
                                <li className="nav-item">
                                    <NavLink className="nav-link" to="/about">About</NavLink></li>
                                <li className="nav-item">
                                    <NavLink className="nav-link" to="/contact">Contact</NavLink></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
    );
}


export default navBar;

footer.jsx

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

function footer(){
    return(
        <div className="footer">
            <footer class="py-5 bg-dark fixed-bottom">
                <div class="container">
                    <p class="m-0 text-center text-white">cencored</p>
                </div>
                 <div>
                    <ul className="navbar-nav ml-auto">
                        <li className="nav-item">
                            <NavLink className="nav-link" to="/">Home</NavLink></li>
                        <li className="nav-item">
                            <NavLink className="nav-link" to="/menu">Menu</NavLink></li>
                        <li className="nav-item">
                            <NavLink className="nav-link" to="/about">About</NavLink></li>
                        <li className="nav-item">
                            <NavLink className="nav-link" to="/contact">Contact</NavLink></li>
                    </ul>
                </div>
            </footer>
        </div>
    );
}


export default footer;

index.js（组件导出）

export { default as navbar } from './navBar';
export { default as footer } from './footer';
export { default as home } from './home';

Answer 1

不要在 Route 上使用 element 道具，而是尝试像组件道具一样

<Route path="/" component={Home}>

您还必须大写组件。

Answer 2

React 组件应该使用 PascalCase 名称。

export { default as Navbar } from './navBar';
export { default as Footer } from './footer';
export { default as Home } from './home';

...

import { Navbar, Footer, Home } from './components';

ReactDOM.render(
    <Router>
      <NavBar />
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
      <Footer />
    </Router>,
    document.getElementById("root")
);

Answer 3

您缺少从“react-router-dom”导入 Switch 并且必须将路由包装到 .在 Routes 中，您必须添加所有带有路径的组件，而不仅仅是 Home 组件。

伪代码：

    import { Switch, Route, Router } from "react-router-dom";
    import Home from '.....path'
    //import all routing componets
    
    const Routes = () => {
     return(
    <Switch>
     <Route exact path='/' component={Home}>
     <Route exact path='/comp1' component={Comp1}>
     <Route exact path='/comp2' component={Comp2}>
   </Switch>)}

  

   const App = () => {
    <Router>
      <GlobalNav />
      <Container fluid={true}>
        <SideNav />
        <Routes />
      </Container>
    </Router>}

然后你可以在任何地方添加你的导航栏，但必须被包裹到路由器中。我刚刚添加了一个例子，我可以在某处有错字，但如果你遵循这个概念，它应该可以工作。并将您的组件更改为 Pascal 命名。

Answer 4

如果你默认导出，你会像这样导入：

import Home from './components/Home'

您不能有多个默认导出。

我建议你像这样导出：

export function Home() {

那么你不需要在文件末尾写导出，你将无法更改导出名称，我认为这是一件好事。

然后你可以像这样导入：

import {Home} from './components/Home'
import {Footer} from './components/Footer'
import {Navbar} from './components/Navbar'