React Router仅/workout/all路由生效，Switch内其余路由访问无响应

问题根因定位 #

• 核心拼写错误：Switch内除/workout/all外的3条路由，将渲染组件属性误写为componnet（缺失字母e）。React Router的Route组件仅识别标准属性*component*作为页面渲染目标，拼写错误的属性属于未定义参数，不会被组件内部解析，即使路径完全匹配，也因找不到渲染目标无法触发页面更新。这也是AllWorkouts页面内Create按钮点击、直接输入其他路由URL后无响应的直接原因。
• 潜在匹配顺序风险：当前Switch的路由排布将带动态参数:id的三级路径放在静态路径前，虽现有路径结构下（三级动态路径vs二级静态路径）不会产生匹配冲突，但后续如果新增二级动态路由规则，静态路由会被动态路由优先匹配覆盖。

修正方案 #

1. 统一将错误拼写的componnet替换为标准属性*component*
2. 调整Switch内的路由顺序，将静态路径配置放置在动态路径之前，从机制上避免匹配覆盖问题

修正后的Main组件代码：

import { Link, Route, Switch } from 'react-router-dom';

import AllWorkouts from './Workout/AllWorkouts/AllWorkouts';
import WorkoutCreate from './Workout/WorkoutCreate/WorkoutCreate';
import WorkoutDetails from './Workout/WorkoutDetails/WorkoutDetails';
import WorkoutEdit from './Workout/WorkoutEdit/WorkoutEdit';    

const Main = () => {
    return (  
        <Switch>    
            {/* 静态路由优先匹配，避免被动态路由覆盖 */}
            <Route path="/workout/create" component={WorkoutCreate} />
            <Route path="/workout/all" component={AllWorkouts} />    
            {/* 动态路由后置匹配 */}
            <Route path="/workout/:id/edit" component={WorkoutEdit} />
            <Route path="/workout/:id/details" component={WorkoutDetails} />
        </Switch>
    );
}

export default Main;

冗余代码提示 #

• Main组件中未使用的Nav引入、AllWorkouts组件中未使用的Switch、Route引入都属于无效代码，不会影响运行逻辑，可按需清理以减小打包体积。

内容的提问来源于stack exchange，提问作者Любомир Георгиев