如何在React中仅在起始页渲染Home组件？

问题根源是React Router的Route默认采用模糊匹配——只要当前路径以设定的path开头，就会触发组件渲染。所以path="/"会匹配所有以/开头的页面（也就是所有页面），导致Home组件在每个页面都显示。

下面是两种可行的解决方法：

方法一：添加exact属性 #

给Home对应的Route加上exact，强制路由仅在路径完全等于/时才渲染组件：

import "./index.css";
import News from "./news";
import Nav from "./nav";
import Home from "./home";
import {BrowserRouter, Route} from "react-router-dom"

ReactDOM.render(
  <BrowserRouter>
    <Nav />
    {/* 新增exact属性 */}
    <Route exact path="/" component={Home}></Route>
    <Route path="/Nintendo"><News newsName="nintendo+games" /></Route>
    <Route path="/Playstation"><News newsName="playstation+games"/></Route>
    <Route path="/Xbox"><News newsName="xbox+games" /></Route>
    <Route path="/PC"><News newsName="pc+games" /></Route>
    <Route path="/Retro"><News newsName="retro+games" /></Route>
    <Route path="/Indie"><News newsName="indie+games" /></Route>
  </BrowserRouter>,
  document.getElementById("root")
);

方法二：使用Switch组件 #

导入Switch并包裹所有Route，它会只渲染第一个匹配成功的路由，避免多个路由同时触发：

import "./index.css";
import News from "./news";
import Nav from "./nav";
import Home from "./home";
// 新增Switch导入
import {BrowserRouter, Route, Switch} from "react-router-dom"

ReactDOM.render(
  <BrowserRouter>
    <Nav />
    <Switch>
      <Route path="/" component={Home}></Route>
      <Route path="/Nintendo"><News newsName="nintendo+games" /></Route>
      <Route path="/Playstation"><News newsName="playstation+games"/></Route>
      <Route path="/Xbox"><News newsName="xbox+games" /></Route>
      <Route path="/PC"><News newsName="pc+games" /></Route>
      <Route path="/Retro"><News newsName="retro+games" /></Route>
      <Route path="/Indie"><News newsName="indie+games" /></Route>
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

两种方法各有适用场景：exact适合单独控制某条路由的匹配规则，Switch适合批量管理路由，确保同一时间只有一个路由组件渲染。

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