React使用Router切换页面时两个页面内容同时显示如何解决

问题根因 #

• 你把两个登录按钮的<Link>组件直接放在了<Router>根节点下，没有归属于任何路由规则，所以不管切换到哪个路径，这两个按钮都会一直展示，看起来就像多页面内容重叠
• 缺少根路径/对应的主页路由配置，也没有补全Admin页面的路由和跳转配置
• Admin登录的<Link>没有加to属性，无法触发路由跳转

修复步骤 #

第一步：新增主页组件Home.js，把两个登录按钮放到主页里 #

import React from 'react';
import { Link } from 'react-router-dom';

const Home = () =>{
    return(
        <div>
            <Link className="btn-success user-btn" to = "/user">User Login</Link>
            <Link className="btn-success admin-btn" to="/admin">Admin Login</Link>
        </div>
    );
}
export default Home;

第二步：修改App.js的路由配置 #

如果你用的是react-router-dom v5（也就是你代码里用的Switch对应的版本），修改后代码如下：

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './Home';
import User from './User';
// 自行补全Admin组件的引入和实现
import Admin from './Admin';

function App() {
  return (
    <Router>
      <Switch>
        {/* 根路径对应主页，加exact避免匹配其他路由 */}
        <Route path="/" exact>
          <Home />
        </Route>
        <Route path="/user" exact>
          <User />
        </Route>
        <Route path="/admin" exact>
          <Admin />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

如果你用的是react-router-dom v6版本，注意v6已经废弃Switch换成Routes，配置参考如下： #

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import User from './User';
import Admin from './Admin';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/user" element={<User />} />
        <Route path="/admin" element={<Admin />} />
      </Routes>
    </Router>
  );
}

修改后默认打开就会加载根路径的主页，仅展示两个登录按钮，点击对应按钮会跳转到对应路径，仅渲染对应页面的内容，不会出现内容重叠问题。

内容的提问来源于stack exchange，提问作者Mahad Ali