为什么我的href标签在我登录后变成空白-ReactJs

Question

我面临一个非常奇怪的问题。在我的react应用程序中，导航栏类似于：

<ul>
<li>
<a href={"/Marketplace"}>Marketplace</a>
</li>
</ul>

我的应用程序中有一个简单的登录功能，可以在登录后将用户重定向到主页。登录后，上面锚标记中的href值将消失。我似乎不明白为什么会发生这种事。基本上，相同的代码块现在变成了：

<ul>
<li>
<a href>Marketplace</a>
</li>
</ul>

Answer 1

如果您想允许用户在点击时链接到其他页面，请使用Link标记！获取更多帮助反应路由器dom

import React from "react";
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";
const Marketplace = () => {
return <div>This is the Market place</div>;
};
const Home = () => {
return <div>This is the home page</div>;
};
export default function App() {
return (
<div className="App">
<BrowserRouter>
<nav>
<div>
<Link to="/">Home</Link>
</div>
<div>
<Link to="/Marketplace">Marketplace</Link>
</div>
</nav>
<Switch>
<Route path="/Marketplace">
<Marketplace />
</Route>
<Route path="/" exact>
<Home />
</Route>
</Switch>
</BrowserRouter>
</div>
);
}

Answer 2

如果您使用的是react路由器，请使用Link而不是Anchor Tag

import { Link } from "react-router-dom";

<Link to="/Marketplace">Marketplace</Link>