React Router如何设置Navigation组件不在Contact页面显示

有两种常用的实现方式，你可以根据自己的需求选择： #

方案1：仅修改App.js，无需调整Navigation组件*（推荐）* #

直接通过Route的路径匹配规则控制Navigation的渲染，React Router v5支持传入路径数组匹配多个路由：
修改后的完整App.js代码如下：

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Error from './components/Error';
import Navigation from './components/Navigation';
 
class App extends Component {
  render() {
    return (      
       <BrowserRouter>
        <div>
          {/* 仅匹配根路径和/about路径时渲染导航 */}
          <Route path={["/", "/about"]} exact component={Navigation} />
            <Switch>
             <Route path="/" component={Home} exact/>
             <Route path="/about" component={About}/>
             <Route path="/contact" component={Contact}/>
             <Route component={Error}/>
           </Switch>
        </div> 
      </BrowserRouter>
    );
  }
}
 
export default App;

方案2：在Navigation组件内部判断路径控制显隐 #

如果需要把显隐逻辑封装在Navigation组件内部，可以用withRouter高阶组件注入路由属性：

1. 修改Navigation组件代码：
   如果是类组件写法：

import React from 'react';
import { withRouter } from 'react-router-dom';

class Navigation extends Component {
  render() {
    // 访问contact路径时返回null不渲染
    if (this.props.location.pathname === '/contact') {
      return null;
    }
    // 原有导航渲染逻辑
    return (
      <div>
        {/* 原有导航内容 */}
      </div>
    )
  }
}

export default withRouter(Navigation);

如果是函数组件写法：

import React from 'react';
import { withRouter } from 'react-router-dom';

function Navigation(props) {
  if (props.location.pathname === '/contact') {
    return null;
  }
  return (
    <div>
      {/* 原有导航内容 */}
    </div>
  )
}

export default withRouter(Navigation);

2. App.js代码保持你原来的写法即可。

如果你使用的是React Router v6版本，只需要把对应语法替换为v6的规范即可，核心逻辑不变。

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