有多种方法可以解决这个问题。我最喜欢在
我正试图在一个干净的React应用程序上创建一个Navbar(使用React Router Dom(，由于某种原因，我只是看到了一个空白屏幕，据我所见，从查找各种指南来看，它应该没问题：
App.js:
import React from "react";
import Navbar from "./components/Navbar";
function App() {
return (
<Navbar/>
);
}
export default App;
Index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Navbar.js
import React from "react";
import { Link } from "react-router-dom";
const Navbar = ()=>{
return(
<nav className = "nav-wrapper">
<div className="container">
<Link to="/" className="brand-logo">Potter Books</Link>
<ul className="right">
<li><Link to="/">Shop</Link></li>
<li><Link to="/">Cart</Link></li>
</ul>
</div>
</nav>
);
}
export default Navbar;
App.js中使用BrowserRouter的地方
通过导入BrowserRouter修改您的app.js文件
import {
BrowserRouter,
} from "react-router-dom";
然后将其添加到应用程序功能中。
function App() {
return (
<BrowserRouter>
<Navbar/>
<BrowserRouter/>
);
}
export default App;
有关更多信息，您也可以查阅此页面。
因此，要解决此问题，需要添加
import {BrowserRouter as Router} from "react-router-dom";
进入Index.js