React 项目工作但不显示某些组件

Question

我正在尝试使用 React 构建一个投资组合网站，我正在使用 react-router-dom 进行导航。

一切正常，然后我犯了一个愚蠢的错误，将项目保存在 onedrive 中并遇到了一些麻烦。

link 编码：https://github.com/Raghav-rv28/portfolio-website

直播：https://raghav-rv28.github.io/portfolio-website/，这不是很有帮助，因为我们什么都看不到，但你可以看到下面的截图，

当我运行本地机器上的项目时运行s :

如您所见，元素在那里，但由于某种原因它们没有出现在我面前。

部分代码：

import React from 'react'
import {Route, Routes} from 'react-router-dom'
import Layout from './Components/Layout'
import Home from './Components/Home'
import About from './Components/About'
import Contact from './Components/Contact'
import Interests from './Components/Interests'
import Projects from './Components/Projects'
import './App.scss';

function App() {
  return (
    <>
          <Routes>
        <Route path="/" element = { <Layout />} >
            <Route index element={< Home/>} />
            <Route path='About' element={< About/>} />
            <Route path='Contact' element={< Contact/>} />
            <Route path='Interests' element={< Interests/>} />
            <Route path='Projects' element={< Projects/>} />
        </Route>
    </Routes>
    </>
  );
}

export default App;

Layout.js:

import React from 'react';
import './index.scss';
import SideNavbar from '../SideNavbar/index';
import { Outlet } from 'react-router-dom';



export default function Layout(){
    return(
    <div className="App">
     <SideNavbar /> 
        <div className="page">
            <Outlet />
        </div>
    </div>)
}

index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom'
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 1

您将（主页、关于、联系方式等）的路线嵌套在“布局”路线中。这意味着 React 路由器将同时呈现“布局”和匹配的嵌套路由提供的任何组件。

尝试像这样重组您的路线：

<>
    <Routes>
        <Route path="/" element = { <Layout />} />
        <Route index element={< Home/>} />
        <Route path='About' element={< About/>} />
        <Route path='Contact' element={< Contact/>} />
        <Route path='Interests' element={< Interests/>} />
        <Route path='Projects' element={< Projects/>} />
    </Routes>
</>

Answer 2

原来我的蠢货 As* 忘记导入我正在使用的动画库，并且页面的不透明度设置为 0。

React 项目工作但不显示某些组件

React Project working but not displaying some components

javascript

reactjs

webpack

react-router