React路由异常：所有路径均显示同一组件的问题排查

嘿，这个坑我之前踩过！其实就是少加了一个关键属性，让我给你理清楚：

问题根源 #

React Router的<Route>组件默认是部分匹配规则——意思是只要当前URL的开头和path值匹配，它就会渲染对应的组件。所以你写的<Route path="/" component={App}/>会匹配所有以/开头的路径（也就是所有路径），而<Switch>组件又只会渲染第一个匹配的路由，导致不管输入什么路径，永远只会显示App组件。反过来把404路由放前面的话，path="*"会匹配所有路径，自然所有页面都显示404了。

解决方案 #

给匹配根路径的Route加上exact属性，让它只在URL完全等于/的时候才渲染App组件。修改后的完整代码如下：

import React from 'react'
import {render} from 'react-dom'
import {App} from './components/App'
import {Whoops404} from './components/Whoops404'
import {BrowserRouter, Switch, Route} from 'react-router-dom'

window.React = React

render(
  <BrowserRouter>
    <div>
      <Switch>
        {/* 加上exact属性，开启严格匹配 */}
        <Route exact path='/' component={App}/>
        <Route path='*' component={Whoops404}/>
      </Switch>
    </div>
  </BrowserRouter>,
  document.getElementById('react-container')
);

小补充 #

exact是React Router处理根路径匹配的核心属性，它能强制路由仅在路径完全一致时才触发渲染，完美解决这种因部分匹配导致的路由优先级混乱问题。

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