React JS 中的 Router 元素有什么问题?
What is wrong with my Router element in React JS?
我的导航栏图标没有显示,控制台在 App.js 处宣布错误为:"第 9 行:'Router' 未定义 react/jsx-no-undefct/jsx-no-undef”。
我不知道我的代码有什么问题。任何人都可以帮助我吗?非常感谢!
这是我的 App.js:
import React from "react";
import Navbar from "./components/Navbar";
import "./App.css";
import { BrowserRouter as Browser, Switch, Route } from "react-router-dom";
function App() {
return (
<>
<Router>
<Navbar />
<Switch>
<Route path="/" />
</Switch>{" "}
</Router>{" "}
</>
);
}
export default App;
这是我的 Navbar.js:
import React from "react";
import * as FaIcons from "react-icons/fa";
import { Link } from "react-router-dom";
function Navbar() {
return (
<div>
<div className="navbar">
<Link to="#" className="menu-bars">
<FaIcons.FaBars />
</Link>{" "}
</div>{" "}
</div>
);
}
export default Navbar;
您似乎在使用 App.js 中未定义的东西(路由器),在 react-router-dom 导入中将 Browser 重命名为 Router 以使其工作
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
function App() {
return (
<>
<Router>
<Navbar />
<Switch>
<Route path="/" />
</Switch>
</Router>
</>
);
}
我的导航栏图标没有显示,控制台在 App.js 处宣布错误为:"第 9 行:'Router' 未定义 react/jsx-no-undefct/jsx-no-undef”。 我不知道我的代码有什么问题。任何人都可以帮助我吗?非常感谢!
这是我的 App.js:
import React from "react";
import Navbar from "./components/Navbar";
import "./App.css";
import { BrowserRouter as Browser, Switch, Route } from "react-router-dom";
function App() {
return (
<>
<Router>
<Navbar />
<Switch>
<Route path="/" />
</Switch>{" "}
</Router>{" "}
</>
);
}
export default App;
这是我的 Navbar.js:
import React from "react";
import * as FaIcons from "react-icons/fa";
import { Link } from "react-router-dom";
function Navbar() {
return (
<div>
<div className="navbar">
<Link to="#" className="menu-bars">
<FaIcons.FaBars />
</Link>{" "}
</div>{" "}
</div>
);
}
export default Navbar;
您似乎在使用 App.js 中未定义的东西(路由器),在 react-router-dom 导入中将 Browser 重命名为 Router 以使其工作
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
function App() {
return (
<>
<Router>
<Navbar />
<Switch>
<Route path="/" />
</Switch>
</Router>
</>
);
}