ReactJs中如何实现Alert组件仅在Home页面渲染而其他页面不显示

问题根源 #

你当前将<Alert/>组件放在了所有路由规则的外层，属于全局公共渲染内容，因此无论匹配哪条路由，该组件都会被渲染。

方案1：将Alert移入Home对应路由（最简方案） #

直接把<Alert/>组件移动到路径为/的Route内部，和Home组件同级，这样只有匹配到首页路径时，Alert才会和Home一起渲染。
修改后的App.js代码如下：

import React, { Component } from 'react'
import Nav from './COMPONENT/navbar/Nav'
import { Route } from 'react-router';
import Home from './COMPONENT/navbar/Home';
import Login from './COMPONENT/navbar/Login';
import About from './COMPONENT/navbar/About';
import Alert from './COMPONENT/navbar/Alert';

export class App extends Component {
  render() {
    return (
      <>
        <Nav />
            <Route exact path="/">
              <Alert/>
              <Home />
            </Route>

            <Route exact path="/about">
              <About />
            </Route>

            <Route exact path="/login">
              <Login />
            </Route>
      </>
    )
  }
}

export default App

方案2：路径判断动态渲染（适合Alert需要和Nav平级展示的场景） #

如果你的布局要求Alert必须放在Nav的上方/平级位置，不想放在Home路由内部，可以通过获取当前路由路径，判断只有首页路径时才渲染Alert。
因为你用的是类组件，需要先引入withRouter高阶组件包裹App，获取路由属性：

import React, { Component } from 'react'
import Nav from './COMPONENT/navbar/Nav'
import { Route, withRouter } from 'react-router'; // 引入withRouter
import Home from './COMPONENT/navbar/Home';
import Login from './COMPONENT/navbar/Login';
import About from './COMPONENT/navbar/About';
import Alert from './COMPONENT/navbar/Alert';

class App extends Component {
  render() {
    // 获取当前路径
    const currentPath = this.props.location.pathname;
    return (
      <>
        {/* 只有路径为/时渲染Alert */}
        {currentPath === "/" && <Alert/>}
        <Nav />
  
            <Route exact path="/">
              <Home />
            </Route>

            <Route exact path="/about">
              <About />
            </Route>

            <Route exact path="/login">
              <Login />
            </Route>
      </>
    )
  }
}

// 用withRouter包裹App，使其能获取路由相关属性
export default withRouter(App);

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