【发布时间】：2021-06-06 22:59:11
【问题描述】：
在我的菜单中，我有一个导航链接 - 我的个人资料。当用户点击我的个人资料时，反应重定向到他们的个人资料。然后按预期将导航链接设置为活动状态，同样应用isActive 样式。
<NavLink className="nav-link" to="/my_profile" activeStyle={isActive}>
My Profile
</NavLink>
用户可以通过导航至www.sitename.com/***username***（如 Twitter 或 Instagram）导航至用户的个人资料。
<Route path="/:profile_name">
<Profile />
</Route>
当用户登录并通过此动态路径导航到他们自己的个人资料时，我希望将 我的个人资料 的导航链接设置为活动状态。但我只能弄清楚如何在点击我的个人资料时将我的个人资料设置为活动状态，而不是当用户通过地址栏导航到他们自己的个人资料时。 p>
当用户通过地址栏导航到他们的动态个人资料路径时，如何将 我的个人资料 的NavLink 设置为活动状态？
示例
在我的代码示例中，我将currentUser 硬编码为dash123，因此当我们导航到http://somedomain.com/dash123 时，Profile 组件将/dash123 识别为当前用户的个人资料并设置状态@987654332 @ 为真。当授权为true 时，Profile 呈现以显示“编辑您的个人资料”。当authorized 是true 时，我是否也可以这样做，我的个人资料 的NavLink 设置为活动状态？
代码：
import React, { useState, useEffect } from "react";
import {
NavLink,
BrowserRouter as Router,
Route,
Switch,
useParams
} from "react-router-dom";
function Nav() {
const isActive = {
fontWeight: "bold",
backgroundColor: "lightgrey"
};
return (
<ul className="navbar-nav mr-auto">
<li className="nav-item">
<NavLink className="nav-link" to="/Shop" activeStyle={isActive}>
Shop
</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/my_profile" activeStyle={isActive}>
My Profile
</NavLink>
</li>
</ul>
);
}
function Shop(props) {
return (
<div>
Lots of items to buy
<br /> Shoes $4.99
<br /> Carrots $9.99
<br /> Teslas $800,000
</div>
);
}
function Profile(props) {
let { profile_name } = useParams();
const [profile, setProfile] = useState();
const [authorized, setAuthorized] = useState(null);
// fake calls to database
const currentUser = () => {
return { name: "Dashie" };
};
const userInfo = (username) => {
const db = [
{ username: "dash123", name: "Dashie" },
{ username: "bob123", name: "Bob" }
];
return db.find((userDoc) => userDoc.username === username);
};
useEffect(() => {
if (props.profile === "currentUser") {
setProfile(currentUser());
} else {
setProfile(userInfo(profile_name));
}
}, [profile_name, props.profile]);
useEffect(() => {
if (profile && profile.name === currentUser().name) {
setAuthorized(true);
}
}, [profile]);
return (
<div>
Profile:
<br />
{profile && <>Name: {profile.name}</>}
<br />
{authorized && profile && <>Edit your profile, {profile.name}</>}
</div>
);
}
export default function App() {
return (
<div className="App">
<Router>
<Nav />
<Switch>
<Route path="/shop">
<Shop />
</Route>
<Route path="/my_profile">
<Profile profile={"currentUser"} />
</Route>
<Route path="/:profile_name">
<Profile />
</Route>
</Switch>
</Router>
<h2>Problem</h2>
<p>
If you click on <b>Shop</b>, as expected the <b>Shop</b> nav link will
be highlighted.
<br />
<br /> Likewise, the <b>My Profile</b> nav link will be highlighted when
we click on it and navigate to the user's profile.
<br />
<br /> But, we also want to have <b>My Profile</b> highlighted when we
navigate to,{" "}
<i>
"https://whateverdomainyouron/<b>dash123</b>"
</i>{" "}
since this takes us to the current user's profile.
</p>
</div>
);
}
【问题讨论】：
标签： javascript reactjs react-router react-router-dom