React路由实现问题：点击Link后导航栏与组件共存如何解决？

嘿，我来帮你排查并解决这个问题！首先咱们先梳理下核心问题，再一步步修复：

核心原因分析 #

你的Order组件同时渲染了导航栏（<ul>+Link）和路由容器（<Switch>），所以不管点击哪个Link，导航栏都会和匹配的步骤组件一起显示。如果你的需求是点击后仅显示选中的步骤组件（导航不显示），那需要调整路由结构；如果只是希望导航保留、仅切换步骤组件，那只需要修复代码里的低级错误即可。

第一步：修复代码中的明显错误 #

先把代码里的几个小问题解决，避免影响路由匹配：

1. DOM结构错误：第三个Link没有用<li>包裹，不符合<ul>的规范，会导致渲染异常
2. 拼写错误：第四个Link的路径写成了/steFour/，应该是/stepFour/
3. 路径不匹配：Link的to属性末尾带斜杠（比如/stepOne/），但Route的path是/stepOne且加了exact，这会导致路由匹配失败

修复后的基础Order组件代码：

import { Component } from 'react';
import { Link, Switch, Route } from 'react-router-dom';
import SearchConcoctionFormula from './SearchConcoctionFormula';
import OrderStepTwoIndex from './OrderStepTwoIndex';
import OrderStepThreeIndex from './OrderStepThreeIndex';
import OrderStepFourIndex from './OrderStepFourIndex';

class Order extends Component {
  render() {
    return (
      <div>
        <ul>
          <li><Link to="/stepOne">1</Link></li>
          <li><Link to="/stepTwo">2</Link></li>
          <li><Link to="/stepThree">3</Link></li> {/* 修复：添加<li>包裹 */}
          <li><Link to="/stepFour">4</Link></li> {/* 修复：拼写错误 + 统一路径格式 */}
        </ul>
        <Switch>
          <Route exact path="/stepOne" component={SearchConcoctionFormula} />
          <Route exact path="/stepTwo" component={OrderStepTwoIndex} />
          <Route exact path="/stepThree" component={OrderStepThreeIndex} />
          <Route exact path="/stepFour" component={OrderStepFourIndex} />
        </Switch>
      </div>
    );
  }
}

export default Order;

第二步：根据需求调整路由结构 #

需求1：点击Link后仅显示步骤组件（导航不显示） #

如果希望点击导航后，页面完全替换成步骤组件，需要把导航和步骤组件拆分成独立的路由节点：

1. 单独创建导航组件（比如OrderNav.js）：

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

const OrderNav = () => {
  return (
    <ul>
      <li><Link to="/stepOne">1</Link></li>
      <li><Link to="/stepTwo">2</Link></li>
      <li><Link to="/stepThree">3</Link></li>
      <li><Link to="/stepFour">4</Link></li>
    </ul>
  );
};

export default OrderNav;

2. 在根路由中配置独立路由：

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import OrderNav from './OrderNav';
import SearchConcoctionFormula from './SearchConcoctionFormula';
import OrderStepTwoIndex from './OrderStepTwoIndex';
import OrderStepThreeIndex from './OrderStepThreeIndex';
import OrderStepFourIndex from './OrderStepFourIndex';

function App() {
  return (
    <Router>
      <Switch>
        {/* 默认显示导航页面 */}
        <Route exact path="/" component={OrderNav} />
        {/* 步骤组件的独立路由 */}
        <Route exact path="/stepOne" component={SearchConcoctionFormula} />
        <Route exact path="/stepTwo" component={OrderStepTwoIndex} />
        <Route exact path="/stepThree" component={OrderStepThreeIndex} />
        <Route exact path="/stepFour" component={OrderStepFourIndex} />
      </Switch>
    </Router>
  );
}

export default App;

这样，访问首页/时显示导航，点击Link后会跳转到对应的步骤路径，此时<Switch>只会匹配并渲染对应的步骤组件，导航就不会显示了。

需求2：保留导航，仅切换步骤组件 #

如果你的真实需求是保留导航栏，只切换下方的步骤内容，那上面修复后的Order组件就可以直接使用——此时导航会一直显示，<Switch>会根据当前路径自动切换显示对应的步骤组件，这也是多步骤表单的常见布局方式。

内容的提问来源于stack exchange，提问作者Mikhail Kostiuchenko