没有错误信息,但它只是显示一个白色屏幕仅此而已。这3个组件很重要,其他的只是未经编辑的片段(ES6 rafce)。我得到的唯一错误是usehistory导入但未使用,但这一个在重新启动应用程序时神秘消失(npm start)。不过,在重新启动之前,我确实更改了索引,但这只是更改Route to元素中的组件,如下图所示。
编辑(因为问题重复):我知道索引中的这个将根路由到应用程序的路由有点奇怪,但我也尝试导入路由并将其包含在其中,以及只是直接使用<App />
。两者仍然给出了一个白色的屏幕。我想这可能与导航栏有关,因为这个问题第一次发生时我正在处理它。然而,我第一次添加链接在导航栏后,我添加了路线的应用程序和浏览器路由器索引。所以可能有一些错误,以及。
指数成分
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter as Router, Route } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router>
<Route path="/" element={<App />} />
</Router>
</React.StrictMode>
);
应用程序组件
//App.js
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Home from './components/Home';
import AboutUs from './components/AboutUs';
import Contact from './components/Contact';
import Missing from './components/Missing';
import { Route, Routes, useHistory } from 'react-router-dom';
function App() {
return (
<div className="App">
<Navbar />
<Routes>
<Route exact path="/">
<Home />
</Route>
<Route path="/contact">
<Contact />
</Route>
<Route path="/about_us" element={<AboutUs />} />
<Route path="*" element={<Missing />} />
</Routes>
<Footer />
</div>
);
}
export default App;
导航栏组件
//Navbar.js
import React from 'react';
import logo from "../images/Odanhu1.png";
import { FaInstagram, FaUser } from 'react-icons/fa';
import { Link } from 'react-router-dom';
const Navbar = () => {
return (
<nav>
<div>
<ul>
<li><Link to="/">
<figure>
<img src={logo} alt="logo" />
<figcaption>danhu</figcaption>
</figure>
</Link></li>
<li><a href="https://www.instagram.com/"><FaInstagram /></a></li>
<li><Link to="/about_us">About us</Link></li>
<li><Link to="/contact">Contact</Link></li>
<li><p>Partners</p></li>
</ul>
<ul>
<li><Link><FaUser /></Link></li>
</ul>
</div>
<div>
<p></p>
</div>
</nav>
)
}
export default Navbar
1条答案
按热度按时间ddarikpa1#
在呈现App组件时,不需要将其 Package 在
<route>
中。试试这个: