React Router URL带多级路径参数不跳转渲染组件问题求助

问题根因 #

当前路由配置未设置精确匹配规则，React Router 默认采用前缀优先匹配逻辑，路由数组内的规则按顺序匹配，你将短路径/machines放在配置首位，访问/machines/hi时，前缀/machines会优先匹配成功，直接渲染对应Machines组件，不会继续向下匹配更具体的/machines/hi规则。
修改为/somethingElse可正常渲染的原因是该路径和/machines前缀无重合，不会触发前缀匹配逻辑，可正常命中对应路由。

解决方案 #

方案1：调整路由顺序（推荐适配Fuse框架逻辑） #

将路径更长、更具体的路由放在配置靠前位置，短路径放在靠后位置，修改你的MachinesConfig路由配置：

const MachinesConfig = {
    settings: {
        layout: {
            config: {}
        }
    },
    routes: [
        // 长路径前置
        {
            path: '/machines/hi',
            component: Preferences
        },
        // 短路径后置
        {
            path: '/machines',
            component: Machines
        },
    ]
};

方案2：添加精确匹配属性 #

如果不需要调整路由顺序，给短路径路由增加exact: true配置，只有路径完全匹配时才会触发渲染：

routes: [
    {
        path: '/machines',
        component: Machines,
        exact: true // 开启精确匹配
    },
    {
        path: '/machines/hi',
        component: Preferences
    },
]

内容的提问来源于stack exchange，提问作者Gilad Dahan