链接标签在ReactJs中不起作用，白色屏幕

Question

我在React Js应用程序中使用引导程序导航栏。当我使用以下代码时，屏幕上什么都不显示，甚至导航栏也不显示，但当我用'a'标记替换'Link'标记，并将to=''替换为href=''时，它就起作用了，为什么会这样？的编译也没有错误

import React from 'react';
import {Link} from "react-router-dom";
export default function Navbar() {
return (
<>
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<Link className="navbar-brand" to="/">Navbar</Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav ms-auto mb-2 mb-lg-0">
<li className="nav-item pe-3" style={{display:'flex',alignItems:'center'}}>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="24" height="24" fill='white'
viewBox="0 0 64 64"
><path d="M 32 3 L 1 28 L 1.4921875 28.654297 C 2.8591875 30.477297 5.4694688 30.791703 7.2304688 29.345703 L 32 9 L 56.769531 29.345703 C 58.530531 30.791703 61.140812 30.477297 62.507812 28.654297 L 63 28 L 54 20.742188 L 54 8 L 45 8 L 45 13.484375 L 32 3 z M 32 13 L 8 32 L 8 56 L 56 56 L 56 35 L 32 13 z M 26 34 L 38 34 L 38 52 L 26 52 L 26 34 z"></path></svg>
<Link className="nav-link active"  aria-current="page" to="/">
Home</Link>
</li>
<li className="nav-item pe-3"  style={{display:'flex',alignItems:'center'}} >
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="24" height="24"
viewBox="0 0 48 48"
><path fill="#2196F3" d="M37,40H11l-6,6V12c0-3.3,2.7-6,6-6h26c3.3,0,6,2.7,6,6v22C43,37.3,40.3,40,37,40z"></path><path fill="#FFF" d="M22 20H26V31H22zM24 13A2 2 0 1 0 24 17 2 2 0 1 0 24 13z"></path></svg>
<Link className="nav-link active mr-5" to="/">About</Link>
</li>
<li className="nav-item pe-3" style={{display:'flex',alignItems:'center'}} >
<img style={{height:'24px',width:'24px'}} alt='' src="https://img.icons8.com/external-bearicons-outline-color-bearicons/64/000000/external-sign-up-call-to-action-bearicons-outline-color-bearicons-1.png"/>
<Link className="nav-link active" to="/signup">Sign Up </Link>
</li>

<li className="nav-item pe-3" style={{display:'flex',alignItems:'center'}}>
<img  style={{height:'28px',width:'28px'}} src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAFWElEQVRoge3ZXWxTZRgH8P97ek4Xx9rRCGUUgfnF9GILMSCJZGyGYBSNCTFZCG5GUW+AG1QigRsSYmIMeqMYhjMYBsQLEhOjIheiY0QJSNALEkYGjEACbAhdW7b2tOf5e3Fa6Pqxfp1uN3uSpu96Ts95fn3ej51zgJmYiZmYLJSTB2s5HvZrymyDqKUgl4iCn1SzKAIAEQpGSFxSIudjptU32DF/xKlzVwxp7g/69Cg7AXSRXEZCgQSJ5ItAVpsgQYg6I4q9pjIOD63zBacF0twf9LlN+ZhUm0h4ksmhSMSENskQBXsT7prPygWVBVn222iXQPaQ8E9MrixE+n63CX54ZX3gcFUhK0+NeKKmsY/khsyEHECkb+utNfRNFzr8EcchLcfDfsOwjpF8rsoIwD7mOY2utZffahh2DJJEnCTZNBWIB21gIJbQWm9tLDy7aYV2WHlqxJOsxFQjQLLJ0OSXeQdvzaoYEovpX09Vd8pAJPeTZXo80VMRxJ6d0Dl9CHs/gOsDPdc3TJZr3jHS3B/0GSYv0vkptiREWvu2W7eeGXrn8ZzrTN6K2ItdmQgRSNwERZxCgOS8mKm2lVSR5v6gT49xCIS3nEok7oew3Kdw/m4ClrsOVK5KEanvjEbHpTG4NbsqOSuiR9lZLoJiYa6ewJFXn8C+9ga4xkOglXACAZL1brfKOVbyda2uSsaEruxCty30Yv/qAIyojakQYW8Du4qCtBwP+2n/F1v+wE6L1oVedK9eAD0aBiyrMoS9bUWge2BOQYjC+IsUURDLHqwioFhAVtvent6mWKAlwEQLVi3y4ps1C6BHQ6BlVYIACRWNGe2ZeeuZHzQkIq2Qib+a/Z52sOTfmTNaCuB/JLvHrlrkxf6XFuD9X2/ArPFkTABFI0ASGtEC4OikkJ1L577eGqjLSsSJaF9cj56XFd49dh0xdx2gXCUjQEBEmjKPnfXT1erKUxVFMtoWe/HtK4/BHQtnrDMlLKTQ/AUhHsNVU02IjanH9hVzIWa0dITdjb0FIZkDtXpRRiXS9suMLEgobsWqTfhjaBSf/DkM6O6yECRCBSH341a42oi3f7oG0/CA0MpBgETWVWPWrLX73J0fd58d3jzpFJuaaXOVnEDDLA1H31iShThxdRQbf04ilKtcBCAYKAi5ydqTVGrzg3UETOaeXE9S7TwnggisyP2clXAEQUIU/y0IMeP4XTc0AlA2QiURKg2kkNr2EKsABVA9XBjTEQ+6U4UIEqJc7MvMO2uMDHbMH4GoM6WeCEg7aZrEYQRIOR3+qOlOQUgyo0NlI0iYCfvDE1edRhCg6s2Vcs4Lq8Yf7s02ErFr9jVJaQgIYY2FsXyOwj93Eogbdc4hgKABV+O97U+OFlWRoXW+IAV7S0YQIBRUTS3OBmsQdztZCQCCr3Ih8kIAAHHjU4I3S0Kk2soFuPRK1oksBMlbuml8ni/dvJDBzkdDJLeVjMibXCUIQIitwV2576BMXhEAV9YHDpM4ON0IihwY39n0/WS5FrzTWGvom4X8e9oQ5JmxhHdLoTwLQi50+CNGXFsLYGDquxMvakp7DbsCYxVDAGBw4/wRy5QXQPw1hZU464q72iI7ni7qOWNREAC48d7CuzFNXwNB7xQgvhuLe9oju54q6tkIUOajt0DP9Q0gvyA5z2HETSE/KDSwHYMAQOOBq7NjptpGqi0kvRUiRkF8aWiuPfkWvKpBUuHrvlxvJFxvEuwC8TwJrUiEkHIa0A4Z0I6UC3AMkh6B7oE5UVNvU5ZaSsoSQvMr0CP2fbIwiWEQl4RyXllWX3jHs/85ef6ZmImZyB//A4/DONGQxBA2AAAAAElFTkSuQmCC" alt=''/>
<Link className="nav-link active" to="/login">Login</Link>
</li>

</ul>

</div>
</div>
</nav>

</>
)
}

路由

import Navbar from './components/Navbar';
import Homegif from './components/Homegif';
import {
BrowserRouter as Router,
Route,Routes
} from "react-router-dom";
import Signup from './components/Signup';
import Login from './components/Login';
function App() {
return (
<>
<Navbar/>
<Router>

<Routes>
<Route exact path="/" element={<Homegif/>}>

</Route>
<Route exact path="/signup" element={<Signup/>}>

</Route>
<Route exact path="/login" element={<Login/>}>

</Route>
</Routes>



</Router>

</>

);
}
export default App;

这是包含路由的文件。这在我出错的另一个页面上显示。

Answer 1

您正在将<Link className="nav-link active" to="/login">Login</Link>与类一起使用，这就是为什么如果您想将Link标记与类反应路由器一起使用，则会出现错误。dom为NavLink提供类属性，尝试将其更改为：

import {NavLink} from 'react-router-dom';
<NavLink className="nav-link active" to="/login">Login</Link>

使用NavLink而不是Link来使用类属性。

你应该像这个一样定义你的路线

import Navbar from './components/Navbar';
import Homegif from './components/Homegif';
import {BrowserRouter as Router,Route,Routes} from "react-router-dom";
import Signup from './components/Signup';
import Login from './components/Login';
function App() {
return (
<>
<Router>
<Navbar/>
<Routes>
<Route exact path="/" element={<Homegif/>}/>
<Route exact path="/signup" element={<Signup/>}/>
<Route exact path="/login" element={<Login/>}/>
<Routes/>
</Router>
</>
);
}
export default App;

希望这能解决你的问题