React项目中Home首页组件为什么会在所有路由下都渲染？

问题原因 #

你将<Home />组件放在了Switch路由匹配容器的外部，Switch只会根据当前路由渲染匹配到的对应组件，而放在它外部的内容会在所有路由下全局渲染，这就是首页会出现在所有页面下方的原因。

解决方法 #

把Home组件作为根路径对应的路由项放进Switch内部，同时删除原来全局放置的<Home />标签即可。

修改后的App组件代码： #

import React from 'react';
import './App.css';
import Nav from './Nav';
import Meals from './Meal';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import RandomRecipe from './RandomRecipe';
import Home from './Home'


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  render() { 
    return (
      <Router>
        <div className="content">
          <Nav />
          <Switch>
            {/* 新增根路径的Home路由，加exact做精确匹配 */}
            <Route path="/" exact component={Home}/>
            <Route path="/meals" exact component={Meals}/>
            <Route path="/random" exact component={RandomRecipe}/>
          </Switch>
        </div>
        {/* 删掉此处原来的<Home />标签 */}
      </Router>
  );
  }
}

export default App;

补充说明 #

• 根路径/必须加exact属性，否则它会匹配所有以/开头的路径，导致其他路由无法正常渲染。
• 你Home组件内导入的Router、Switch、Route没有用到，可以删掉多余导入，减少打包体积。

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