React Router需要帮助路由

Question

我是一个初学者前端开发，我试着做一个想象中的网站。我现在正在学习如何做出反应。所以当我试着点击home/about或联系人按钮时，它不会打开它。我做错了什么?

下面是我的代码:

我的App代码:

import React from 'react';
import './App.css';
import Navibar from './Components/Navibar';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Home from './Components/Home';
import About from './Components/About';
import Contact from './Components/Contact';

let App = () => {
return (
<Router>
<div className="App">
<Navibar/>
<div className="content">
<Switch>
<Route exact path="/">
<Home/>
</Route>
<Route exact path="/About">
<About/>
</Route>
<Route exact path="Contact">
<Contact/>
</Route>
</Switch>

</div>
</div>
</Router>
);
}
export default App;

这是我的导航条代码:

import React from 'react';
import {Nav, Navbar, Container} from 'react-bootstrap';
import {Link} from 'react-router-dom';
let Navibar = () => {
return (
<>
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand href="#home">My Portfolio</Navbar.Brand>
<Nav className="me-auto">
<Link to="/">Home</Link>
<Link to="#about">About me</Link>
<Link to="#contact">Contact</Link>
</Nav>
</Container>
</Navbar>
</>
);
}
export default Navibar;

这里是我的Home (Home/about和contact code是一样的)代码:

import React from 'react';

let Home = () => {
return (
<>
<h2>Home</h2>
</>
);
}
export default Home;

我需要专业人士的帮助，因为我被困在这里了:)

Answer 1

Navibar应该链接到你正在渲染的路由路径，而不是当前页面上的锚标记(哈希)。bootstrapNavbar.Brand组件也应该呈现RRDLink组件，而不是带href属性的普通锚标记。

import React from 'react';
import { Nav, Navbar, Container} from 'react-bootstrap';
import { Link } from 'react-router-dom';
const Navibar = () => {
return (
<>
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand
as={Link} // <-- as a RRD Link component
to="/"    // <-- to prop for Link component
>
My Portfolio
</Navbar.Brand>
<Nav className="me-auto">
<Link to="/">Home</Link>           // <-- "/"
<Link to="/about">About me</Link>  // <-- "/about"
<Link to="/contact">Contact</Link> // <-- "/contact"
</Nav>
</Container>
</Navbar>
</>
);
}
export default Navibar;

App组件应该指定与导航条链接相匹配的路由路径。

App在Switch组件内呈现的路由应该按照路由路径特异性的反比顺序呈现。换句话说，渲染more之前的特定路径指定路径。这是尝试匹配和渲染更具体的路径，并回落到不太具体的路径。这也有效地消除了使用exactprop的需要。

const App = () => {
return (
<Router>
<div className="App">
<Navibar />
<div className="content">
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/contact">
<Contact />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</div>
</Router>
);
}