我正在一个项目中测试React Router(这是我第一次使用它),由于某些原因,当我单击“链接”时,该路由不起作用,但是当我直接在网址,然后刷新页面,它可以正常工作,有人可以帮我吗?
这是代码:
应用组件
import React from "react";
import "./styles.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import NavBar from "./components/NavBar";
import ProductList from "./components/ProductList";
import Home from "./components/Home";
export default function App() {
return (
<div className="App">
<NavBar />
<Router>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/products" component={ProductList} />
</Switch>
</Router>
</div>
);
NavBar组件(到目前为止,我还没有在链接中包含“我的购物车”)
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
function NavBar() {
return (
<nav className="navbar navbar-light bg-dark p-3">
<Router>
<Link to="/">
<i className="fas fa-gifts fa-2x text-light ml-2" />
</Link>
<Link to="/products" className="btn text-light bg-dark mr-2 ml-auto">
Products
</Link>
</Router>
<button className="btn text-light bg-dark">
<i className="fas fa-shopping-cart" />
My Cart
</button>
</nav>
);
}
export default NavBar;
答案 0 :(得分:1)
此设置将起作用-
对于App.js
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import NavBar from "./components/NavBar";
import ProductList from "./components/ProductList";
import Home from "./components/Home";
export default function App() {
return (
<div >
<Router>
<Route path="/" component={NavBar} />
<Route path="/" exact component={Home} />
<Route path="/products" exact component={ProductList} />
</Router>
</div>
);
}
用于NavBar.js
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
function NavBar() {
return (
<nav className="navbar navbar-light bg-dark p-3">
<Link to="/">
<i className="fas fa-gifts fa-2x text-light ml-2" />
Home
</Link>
<Link to="/products" className="btn text-light bg-dark mr-2 ml-auto">
Products
</Link>
</nav>
);
}
export default NavBar;