如何使用 react-router-dom 识别您何时处于该特定路径上

Question

我正在使用React路由器导航到我的React应用程序中的不同页面。在我的页脚中，我有一个指向/about路径的链接。当我点击该链接时，它会将我带到localhost:3000/about。然而，当我再次单击它时，它会将我带到localhost:3000/about/about。我该如何避免这种情况？以下是我的路线：

function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
<Route path="privacy" element={<Privacy />} />
<Route path="templates" element={<Templates />} />
<Route path="template-one" element={<TemplateOne />} />
<Route path="template-two" element={<TemplateTwo />} />
<Route path="contact" element={<Contact />} />
</Routes>
</Router>
);
}

页脚：

const Footer = () => {
return (
<footer className={classes.footer}>
<div className={classes.footerLinks}>
<h2>Company</h2>
<Link to="about" exact>
About
</Link>
<Link to="privacy" exact>
Privacy
</Link>
<Link to="/">Expectations</Link>
</div>
</footer>
);
};

Answer 1

在链接上使用/

<Link to="/about">About</Link>

如果你在子级别，这里有一个问题可以回答只切换端点中最后一条路径的问题。正如答案所示，您可以使用useLocation挂钩来了解您所在的当前位置。

Answer 2

问题

这里的问题是页脚呈现的链接使用相对路径，而不是绝对路径。

<Link to="about">About</Link>

单击to="about"时，链接将相对于".../about"的当前匹配路径进行导航。

示例：

• "&quot-&gt"关于">
• "关于"->quot/大约/大约">
• "联系人"->quot/联系/关于">

相对路径和绝对路径之间的区别很简单；绝对路径以前导CCD_ 5开始，而相对路径则不然。

解决方案

为要使用绝对路径的链接准备一个"/"。

const Footer = () => {
return (
<footer className={classes.footer}>
<div className={classes.footerLinks}>
<h2>Company</h2>
<Link to="/about">   // <-- absolute path
About
</Link>
<Link to="/privacy"> // <-- absolute path
Privacy
</Link>
<Link to="/">Expectations</Link>
</div>
</footer>
);
};

Answer 3

您可以尝试在每个路由路径中添加/星号(/*(。

<Route path="about/*" element={<About />} />