React Router Dom点击<Link>后URL更新但<Route>页面不渲染问题求助

问题原因 #

return (<Switch> 组件的路由匹配规则是**从上到下优先匹配第一个符合规则的路由**，匹配成功后就不会继续校验后续路由，你现在的代码存在两个问题导致匹配失效：
1. 路由顺序错误：`/admin/users/:id` 路由放在了更具体的 `/admin/users/:id/userTrans` 路由前面，`/admin/users/1/userTrans` 路径会被前者先匹配到，系统会把`1/userTrans`整体识别为`id`参数的值，直接渲染DriverPage组件，不会走到后续的UserTransactions路由。
2. 动态参数写法错误：路由中写的`:1`是错误的动态参数格式，动态参数位置应该填参数名而非具体值，你需要匹配任意用户id的话应该写为`:id`。

### 修复方案
调整路由顺序，把更具体的路由移到模糊路由前面，同时修正动态参数写法即可，修改后的App组件代码如下：
```jsx
const App = () => {
    const pathBase = '/admin';
    return (
        <div className="container">
            <Tabbar/>
)

<Switch>
            <Route exact path={`${pathBase}/users/`} component={AllUsers} />
            {/* 把更具体的用户交易路由放到:id路由前面 */}
            <Route path={`${pathBase}/users/:id/userTrans`} component={UserTransactions}/>
            <Route path={`${pathBase}/users/:id`} component={DriverPage}/>
            <Route path={`${pathBase}/rides`} component={AllRides}/>
            <Route path={`${pathBase}/chat`} component={AllMessages}/>
            <Route path={`${pathBase}/userMessages`} component={UserMessages}/>
            <Route path={`${pathBase}/mail`} component={Mailing}/>
            <Route path={`${pathBase}/transactions`} component={AllTransactions}/>
            <Route path={`${pathBase}/sales`} component={Sales}/>
            <Route path={`${pathBase}/ads`} component={Ads}/>
            <Route path={`${pathBase}/admins`} component={Admins}/>
            <Route path={`${pathBase}/stats`} component={Stats}/>
        </Switch>
    </div>  
);

}

你原有Link组件的跳转逻辑不需要修改，调整后点击按钮即可正常渲染UserTransactions组件。

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