Блог

Я хочу удалить боковую панель для одного маршрута в своем приложении react. я не хотел, чтобы эта боковая панель на моем конкретном маршруте называлась «Визуальной». Любая помощь от вас, ребята, была бы очень признательна за мой код:

 import React, { Component } from 'react';
import { BrowserRouter as Router, Route } 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'
class App extends Component {
  render() {
    return (
      <div className="App">
             <Router>
        <div className="wrapper">
        <Route exact path="/visual" component={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>
      </Router>
      </div>
    );
  }
}

export default App;
 

Это будет проще реализовать, если у вас есть Layout компонент с боковой панелью. Например, компонент компоновки будет выглядеть следующим образом

 const Layout = ({ children }) => {
  return (
    <div className="wrapper">
      <Sidebar />
      <main className="content">{children}</main>
    </div>
  );
}
 

Таким образом, маршруты, для которых требуется Sidebar , могут быть обернуты Layout компонентом. Например, ваш домашний маршрут будет

 class Home extends Component {
  render() {
    return (
      <Layout>
        Home page content/JSX
      </Layout>
    );
  }
}
 

Таким образом, боковая панель будет отображаться только для маршрутов, использующих Layout компонент.

Вы можете получить свой текущий путь, используя useLocation крюк, который react-router-dom его предоставляет. Вы можете просматривать маршруты, которые вы посещаете, и, пока вы доберетесь до того, который вы не хотите показывать, что-то возвращает значение null вместо компонента.

 const DummyComponent = () => {
  const { pathname } = useLocation();
  if (pathname === '/somewhere') return null;
  return (
    <div>This is my component</div>
  );
}
 

Я думаю, что это сработает для тебя