React Router exact属性不生效，路由组件重叠渲染问题求助

嘿，我来帮你搞定这个React Router的问题～你遇到的核心问题其实是重复使用Router组件加上路由结构混乱导致的，咱们一步步来解决：

问题根源分析 #

• 多个Router冲突：React Router要求整个应用只需要一个顶层的<Router>（比如BrowserRouter），你在Login和DataConfirmation里各自嵌套了<Router>，这会让路由上下文混乱，路由规则无法正确生效。
• 组件循环引用+路由嵌套错误：Login里定义了DataConfirmation的路由，而DataConfirmation里又定义了Login的路由，再加上每个组件都自带Router，导致跳转到/DataConfirmation时，Login组件本身没被替换，同时DataConfirmation里的Router又会匹配根路径/渲染Login，最终两个组件同时显示。

解决方案：重构路由结构 #

我们需要把所有路由配置集中到一个顶层组件，页面组件只负责自己的UI和跳转链接：

1. 创建顶层路由入口组件（比如App.js） #

把所有路由规则统一放在这里，只保留一个Router：

// App.js
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Login from './Login';
import DataConfirmation from './DataConfirmation';
import HomeSearch from './HomeSearch';

function App() {
  return (
    <Router>
      <Switch>
        {/* 根路径渲染Login */}
        <Route exact path="/" component={Login} />
        {/* /DataConfirmation路径渲染DataConfirmation */}
        <Route exact path="/DataConfirmation" component={DataConfirmation} />
        {/* /HomeSearch路径渲染HomeSearch */}
        <Route path="/HomeSearch" component={HomeSearch} />
      </Switch>
    </Router>
  );
}

export default App;

2. 修改Login组件，移除内部的Router和Switch #

只保留Login的UI内容和跳转链接：

// Login.js
import { Link } from 'react-router-dom';
// 记得引入你的Button组件
import Button from './path/to/Button';

function Login() {
  return (
    <div>
      {/* 这里放Login组件的其他登录相关内容 */}
      <Link to="/DataConfirmation">
        <Button type="submit"> Login </Button>
      </Link>
    </div>
  );
}

export default Login;

3. 修改DataConfirmation组件，同样移除内部的Router和Switch #

只保留自身UI和跳转链接：

// DataConfirmation.js
import { Link } from 'react-router-dom';
import Button from './path/to/Button';

function DataConfirmation() {
  return (
    <div>
      {/* 这里放DataConfirmation组件的确认相关内容 */}
      <Link to="/">
        <Button type="submit"> Change phone number </Button>
      </Link>
      <Link to="/HomeSearch">
        <Button type="submit"> verify </Button>
      </Link>
    </div>
  );
}

export default DataConfirmation;

为什么这样改能解决问题？ #

• 整个应用只有一个Router，确保路由上下文统一，Switch会从上到下匹配第一个符合的路由，只会渲染对应的组件，不会同时渲染多个。
• 页面组件不再负责路由配置，只专注于自身UI和跳转，结构更清晰，也避免了循环引用和重复Router导致的冲突。

如果你的react-router-dom是v6版本，注意Switch要换成Routes，Route的写法也要调整（比如用element属性代替component），但按照你当前的代码写法，应该是v5版本，上面的代码可以直接用～

内容的提问来源于stack exchange，提问作者Fatemeh Asadyar