React应用如何为指定路由移除SideBar？以/visual路由为例

你可以通过获取当前路由路径，判断是否为/visual来控制SideBar的显隐，针对你当前使用react-router-dom v5的类组件代码，最小改动的实现方式如下：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, withRouter } from 'react-router-dom';
import Home from "./components/Home";
import SideBar from "./components/Sidebar";

import Apps from './components/login'
import Inference from './components/drop';
import New from './components/new'
import Visual from './components/visual'

// 抽离Router内部的布局组件，用withRouter包裹获取路由属性
const Layout = withRouter(({ location }) => {
  return (
    <div className="wrapper">
      <Route exact path="/visual" component={Visual} />
      {/* 路径不是/visual的时候才渲染侧边栏 */}
      {location.pathname !== '/visual' && <SideBar />}
      
      <Route exact path="/home" component={Home} />
      <Route exact path="/inference" component={Inference} />
      <Route exact path="/" component={Apps} />
      <Route exact path="/new" component={New} />
    </div>
  )
})

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <Layout />
        </Router>
      </div>
    );
  }
}

export default App;

如果你不想抽离组件，也可以直接通过Route的render属性控制侧边栏显隐，仅需替换原代码中<SideBar />一行即可：

{/* 匹配非/visual的指定路由时渲染侧边栏 */}
<Route path={["/", "/home", "/inference", "/new"]} exact render={() => <SideBar />} />

注意：如果你后续升级到react-router-dom v6版本，可以直接在函数组件中调用useLocation()钩子获取当前路径，判断逻辑和上述方案一致。

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