无法在React JS中使用Link标签在页面之间导航

Question

我正在创建一个导航，但是当我点击不同的页面时，例如在本地主机中没有任何变化，我仍然在同一页面中。下面是代码

import {BrowserRouter as Router, Link} from 'react-router-dom';
import Login from './Login';
import About from './About';
import Announce from './Announce';

class Home extends Component {
render(){
return (
<div>
<div>
<img src={banner} width="860"  alt=''/>
</div>
<Router>
<nav>
<ul>
<li><Link to='/' >Home</Link></li>
<li><Link to='./About.js'>About</Link></li>
<li><Link  to={Announce}>Comments</Link></li>
<li><Link to={Login}>Login</Link></li>

</ul>
</nav>

</Router>
</div>

);
}
}
export default Home;

Answer 1

试着只做这些修改，看看你是否能够在这两个

之间导航在app.js:

<Router>
<Switch>
<Route path="/" exact>
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Switch>
</Router>

现在在你的文件中，你需要点击(home.js我想):

<Link to="/">
<span>Home</span>
</Link>
<Link to="/about">
<span>About</span>
</Link>

Answer 2

解决了

app.js

<Router>
<Switch>
<Route path="/" exact>
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/login">
<Login />
</Route>
<Route path="/announce">
<Announce />
</Route>
</Switch>

Home.js

import React from 'react';
import './About';
import './Announce';
import './Login';
const Home =() => {
return (
<nav>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='./About'>About</a></li>
<li><a href='./Announce'>Comments</a></li>
<li><a href='./Login'>Login</a></li>

</ul>
</nav>
)
}