无法使用 React JS 中的链接标签在页面之间导航答案

【问题标题】：Unable to navigate between pages using Link tag in React JS无法使用 React JS 中的链接标签在页面之间导航
【发布时间】：2021-10-25 16:47:04
【问题描述】：

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

 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;

【问题讨论】：

标签： reactjs navigation react-router-dom

【解决方案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>

【讨论】：

仍然没有任何变化......实际上主页内容消失了。首页是着陆页
抱歉错过了关于about的第二个链接，我更正了它
仍然没有任何改变...
我将链接更改为

【解决方案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>

主页.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>
 )
 }

【讨论】：