如何在 ReactJS 的不同页面上显示不同样式的导航栏？
Posted
技术标签:
【中文标题】如何在 ReactJS 的不同页面上显示不同样式的导航栏？【英文标题】：How to display different styled Navbars on different pages in ReactJS? 【发布时间】：2021-07-25 04:59:53 【问题描述】：我有三个不同的导航栏。它们中的每一个都是不同的组件。
<PublicNavbar />，用于LandingPage、DiscoverPage等公共页面。
<AccessNavbar />，用于SignInPage、SignUppage、VerificationPage等。
<PrivateNavbar /> ，用于NewCampaignPage等私有页面。
如何正确显示它们？如果用户已登录，我想将 DiscoverPage 的 PublicNavbar 替换为 PrivateNavbar。
import React from "react";
import BrowserRouter as Router, Route, Link, Switch from "react-router-dom";
import "semantic-ui-css/semantic.min.css";
import "./App.css";
import PublicNavbar from "./components/Navbar/PublicNavbar";
import AccessNavbar from "./components/Navbar/AccessNavbar";
import PrivateNavbar from "./components/Navbar/PrivateNavbar";
import Footer from "./components/Footer";
import LandingPage from "./pages/LandingPage";
import SignIn from "./pages/SIgnInPage";
import DiscoverPage from "./pages/DiscoverPage";
import SignUp from "./pages/SignUpPage";
import Verification from "./pages/VerificationPage";
import Registration from "./pages/RegistrationPage";
import RegistrationComplete from "./pages/RegistrationCompletePage";
import NewCampaign from "./pages/NewCampaignPage";
function App()
return (
<Router>
<div>
<div id="container">
<div id="main">
<Switch>
<Route path="/" exact component=LandingPage />
<Route path="/discover" component=DiscoverPage />
<Route path="/signIn" component=SignIn />
<Route path="/signUp" component=SignUp />
<Route path="/verification" component=Verification />
<Route path="/registration" component=Registration />
<Route
path="/registration-complete"
component=RegistrationComplete
/>
<Route path="/new-campaign" component=NewCampaign />
</Switch>
</div>
</div>
<Footer />
</div>
</Router>
);
export default App;
导航条代码示例：
import React from "react";
const PublicNavbar = () =>
return (
<nav className="navbar navbar-expand-lg bg-white">
<div className="container-fluid navbar-container">
<a className="navbar-brand abs nav-bar-title" href="#">
AshoDaanKori
</a>
<button
className="navbar-toggler ms-auto custom-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseNavbar"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="navbar-collapse collapse" id="collapseNavbar">
<ul className="navbar-nav ms-auto">
<li className="nav-item active">
<a
className="nav-link"
href=""
data-bs-target="#myModal"
data-bs-toggle="modal"
>
About
</a>
</li>
<li className="nav-item active">
<a
className="nav-link"
href=""
data-bs-target="#myModal"
data-bs-toggle="modal"
>
How it works
</a>
</li>
<li className="nav-item active">
<a
className="nav-link"
href=""
data-bs-target="#myModal"
data-bs-toggle="modal"
>
Discover
</a>
</li>
</ul>
<a
className="nav-link navbar-btn"
href=""
data-bs-target="#myModal"
data-bs-toggle="modal"
>
Start Campaign
</a>
</div>
</div>
</nav>
);
;
export default PublicNavbar;
【问题讨论】：
我认为最好的方法是创建 NavBarContainer 来为您管理所有逻辑。 可能类似于<Route path="/" exact component=LandingPage navBarComponent=PrivateNavbar/>，其中 navBarComponent 属性是可选的，默认属性值为 PublicNavbar
【参考方案1】：
创建一个名为 NavBarController 的新导航栏组件。 在调用导航栏控制器组件时，将“类型”作为道具传递。类型应该是一个状态，并且应该根据用户状态而改变。
<NavBarController type=1></NavBarController>
让 NavBarController 处理您想要显示的三个导航栏中的哪个导航栏 （其中类型为 1,2 或 3）。
您的 NavBarController 将返回如下内容：
return (props.type===1?<PublicNavbar/>
:props.type===2?<AccessNavbar/>
:props.type===3?<PrivateNavbar/>)
【讨论】：
【参考方案2】：通过条件渲染解决了。我没有创建多个 Navbar 组件，而是创建了一个并根据条件更改了内部元素。
const Navbar = ( isAuthenticated ) =>
return (
<nav
className=`autohide navbar navbar-expand-lg bg-white $
isAuthenticated ? "private-navbar" : ""
`
>
<div className="container-fluid navbar-container">
<NavHashLink className="navbar-brand abs nav-bar-title" to="/">
AshoDaanKori
</NavHashLink>
<button
className="navbar-toggler ms-auto custom-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#main_nav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
isAuthenticated ? (
<div className="collapse navbar-collapse" id="main_nav">
<ul className="navbar-nav ms-auto">
<li className="nav-item active">
<NavHashLink to="/my-fundraisers" className="nav-link">
My fundraisers
</NavHashLink>
</li>
</ul>
<Link to="/start-campaign" className="nav-link navbar-btn">
Start a new campaign
</Link>
/* User profile */
<div className="btn-group nav-item">
<button
type="button"
className="btn "
data-bs-toggle="dropdown"
data-bs-display="static"
aria-expanded="false"
style= padding: "0"
>
<i aria-hidden="true" className="user circle huge icon"></i>
</button>
<ul className="dropdown-menu dropdown-menu-end">
<li>
<h3
style=
textAlign: "center",
fontSize: 18,
fontWeight: 600,
color: "#6E6E6E",
>
userInfo.fullName || "User"
</h3>
</li>
<li>
<hr className="dropdown-divider" />" "
</li>
<li>
<Link className="dropdown-item" to="/account">
Account Settings
</Link>
</li>
<li>
<Link
className="dropdown-item"
to="#"
>
Sign Out
</Link>
</li>
</ul>
</div>
</div> //If authenticated, rendered PrivateNavbar elements
) : (
<div className="collapse navbar-collapse" id="main_nav">
<ul className="navbar-nav ms-auto">
<li className="nav-item active">
<NavHashLink
smooth
to="/#our-story-section"
className="nav-link"
>
About
</NavHashLink>
</li>
<li className="nav-item active">
<NavHashLink to="/how-it-works" className="nav-link">
How it works
</NavHashLink>
</li>
<li className="nav-item active">
<NavHashLink to="/discover" className="nav-link">
Discover
</NavHashLink>
</li>
</ul>
<NavHashLink to="/sign-in" className="nav-link navbar-btn">
START CAMPAIGN
</NavHashLink>
</div> //If not authenticated, rendered PublicNavbar elements
)
</div>
</nav>
);
;
export default Navbar;
【讨论】：
以上是关于如何在 ReactJS 的不同页面上显示不同样式的导航栏？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 React js 在下拉菜单中的选择选项上显示不同的组件