React 不渲染元素

Question

背景

---

我正在通过观看此视频来为未来的生产项目创建一个网页。在video中将导航菜单与HeroSection（Home）53:16合并时，仅反应渲染导航而不是同时渲染两者。

目标

---

渲染主页和导航栏。

附加信息

---

在渲染代码时，我在 Web 控制台中得到 没有错误，并且 在添加例如 background-color: red

 的视频标签样式中的 

HeroSection.css

 时，我没有获得视频的任何视觉指示器

。

目录结构

---

+---public
      favicon.ico
      index.html
      logo192.png
      logo512.png
      manifest.json
      robots.txt
      
   +---images
   +---videos
           rings.mp4          
+---src
       App.css
       App.js
       index.js
       
    +---components
           Button.css
           Button.js
           HeroSection.css
           HeroSection.js
           Navbar.css
           Navbar.js
        +---pages
                Home.js

代码

---

应用程序.js

import React from 'react';

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import './App.css';

import Home from './components/pages/Home';
import Navbar from './components/Navbar';

function App() {
  return (
    <>
      <Router>
        <Navbar/>
        <Routes>
          <Route path='/' exact element={<Home/>}/>
        </Routes>
      </Router>
    </>
  );
}

export default App;

Home.js

import React from 'react';
import '../../App.css';
import HeroSection from '../HeroSection';

function Home() {
    return(
        <>
            <HeroSection />         
        </>
    );
}

export default Home;

HeroSection.js

import React from 'react';
import '../App.css';

import { Button } from './Button';
import './HeroSection.css';

function HeroSection() {
    return (
        <div className='hero-container'>
            <video src="/videos/rings.mp4" autoPlay loop muted controls/>
            <h1>SOME TEXT</h1>
            <p>Another text</p>
            <div className='hero-btns'>
                <Button 
                className="btns" 
                buttonStyle='btn-outline'
                buttonSize='btn--large'
                >
                    GET STARTED
                </Button>
                <Button 
                className="btns" 
                buttonStyle='btn-outline'
                buttonSize='btn--large'
                onClick={console.log('hi')}
                >
                    WATCH TRAILER
                </Button>
            </div>
        </div>
    );
}

export default HeroSection;

我认为这些代码足以解决这个问题。不过，如果需要，我可以在

#Update

部分分享更多内容。

有用的链接

---

原始存储库：https://github.com/briancodex/react-website-v1/tree/master

实际渲染代码：https://imgur.com/a/NrqEqeG

修复尝试失败

我尝试用这个改变路线

<Route path='/' exact element={ <Home />}></Route>

但没有任何改变......

Answer 1

我不确定您共享的存储库是否是最新的，查看您的存储库，似乎您正在使用react-router-dom 5.2.0，如果是这样，请尝试像这样渲染: 直接调用组件：

<Route exact path='/' component={Home}/>

或在元素内添加组件：

<Route path="/">
    <Home />
</Route>

查看更多这里