我正在使用 Bootstrap 在 React 中创建导航栏并添加导航链接。我正在学习使用 React Router,我的主要 App.js 文件如下所示:import './App.css';import { BrowserRouter as
我正在使用 Bootstrap 在 React 中创建导航栏并添加导航链接。我正在学习使用 React Router,我的主要 App.js 文件如下所示:
import './App.css';
import {
BrowserRouter as Router,
Route,
Link,
Routes,
Outlet,
} from "react-router-dom";
import { Navbar, Nav } from "react-bootstrap";
import { FaHome, FaBook, FaBookReader } from "react-icons/fa";
import Home from './Components/Home';
import Thrillers from './Components/Thrillers';
import Classics from './Components/Classics';
import Nonfiction from './Components/Nonfiction';
import Romance from './Components/Romance';
import Sciencefiction from './Components/Sciencefiction';
function App() {
return (
<div className="App">
<Router>
<Navbar className="navbar-bg" expand="lg">
<Navbar.Brand>
<h1 className="navbar-brand-text">
<Link to="/" className="brand-link">
<FaBookReader /> Rupesh Gupta
</Link>
</h1>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link as={Link} to="/" className="nav-link">
<FaHome /> Home
</Nav.Link>
<Nav.Link as={Link} to="/thrillers" className="nav-link">
<FaBook /> Thrillers
</Nav.Link>
<Nav.Link as={Link} to="/classics" className="nav-link">
<FaBook /> Classics
</Nav.Link>
<Nav.Link as={Link} to="/nonfiction" className="nav-link">
<FaBook /> Non Fiction
</Nav.Link>
<Nav.Link as={Link} to="/romance" className="nav-link">
<FaBook /> Romance
</Nav.Link>
<Nav.Link as={Link} to="/sciencefiction" className="nav-link">
<FaBook /> Science Fiction
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<div className="container mt-4">
<Routes>
<Route path="/" element={<Outlet />}>
<Route index element={<Home />} />
<Route path="/thrillers" element={<Thrillers />} />
<Route path="/classics" element={<Classics />} />
<Route path="/nonfiction" element={<Nonfiction />} />
<Route path="/romance" element={<Romance />} />
<Route path="/sciencefiction" element={<Sciencefiction />} />
</Route>
</Routes>
</div>
</Router>
</div>
);
}
export default App;
我遇到的问题是,当页面最初加载时(在 \'npm start\' 之后或访问它在 github-pages 上的部署位置时),主页组件未显示。但是,当我导航到 \'Home\' 或 \'Rupesh Gupta\'(通过 Navbar 组件中的链接)时,主页组件会显示。导航栏中的其他链接按预期工作。如果我关闭开发服务器并重新启动它,主页将不再加载。有什么建议吗?谢谢。
默认主页在页面加载时不可见
下载声明:
本站所有软件和资料均为软件作者提供或网友推荐发布而来,仅供学习和研究使用,不得用于任何商业用途。如本站不慎侵犯你的版权请联系我,我将及时处理,并撤下相关内容!
帖子版权声明
1、本帖标题:默认主页在页面加载时不可见 本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com
除非注明,本帖由Sara tabaghchi 在本站《javascript》 版块原创发布,
转载请注明出处!