Определить боковую панель на основе маршрута в реакции

Question

Интересно, как я могу показать разные боковые панели с разными маршрутами?

Например:

У меня есть два разных компонента боковой панели, такие как:

<SidebarA /> и <SidebarB />, когда пользователь в root '/' я не хочу показывать <SidebarA /> когда в '/list' я не хочу показывать <SidebarB />

я сделал с условием, основанным на window.location.pathname Но после обновления версии моего React и response-router мой window.location.pathname не меняется, если я не обновляю sh страницу.

Мой код теперь такой:

  <div className="columns">
    <div>
      <Switch>
        <Route exact path="/" component={Main} />
        <Route exact path="/list" component={List} />
      </Switch>
    </div>
  </div>

     {window.location.pathname === "/" ? (
          <SidebarA />
        ) : null}

{window.location.pathname === "/list" ? (
          <SidebarB />
        ) : null}

есть какой-нибудь блестящий метод для этого?

Answer 1

Вы должны сделать компоновку компонента высшего порядка, которая принимает следующие реквизиты,

• children: ReactNode;
• вариант ?: 'A' | 'B';

А затем установите флажок в своем компоненте макета, например

const Layout = ({props}) => {
  return (
    {
    props.variant === 'A' ?
     //Code For SideBarA
    :
     //Code for SideBarB
    }
    {children}
  )
}

export default Home ;

, а затем оберните ваш компонент любой боковой панелью, которую вы хотите использовать.

const Main= () => {
  return (
    <Layout variant='A'>
      <div>
        i'm Main
      </div>
    </Layout>
  )
}

export default Main;

Answer 2

Составьте маршрут. js

export default [
{
    path: "/",
    exact: true,
    sidebar: SideBarA
    component: Main
}, {
    path: "/List",
    exact: true,
    sidebar: SideBarB,
    component: List
}]

И в вашем приложении. js

class App extends Component {

render() {
    return (
        <Router>
            <div>
                {routes.map((route, index) => {
                    return (
                        <Route
                            key={index}
                            path={route.path}
                            exact={route.exact}
                            component={
                                return (
                                    <>
                                    <route.sidebar/>
                                    <route.component {...props} />
                                    </>
                              )}
                        />
                    );
                })}
            </div>
        </Router>
    )
}

}

Answer 3

Я хотел бы создать компонент-оболочку для управления им

class MainWrapper extends Component {
  render () {
    return <div className="main-layout">
       <div className="content">{this.props.childern}</div>
       <div className="sidebar"><SideBar></SidebarA></div>
     </div>
  }
}

экспортировать по умолчанию MainWrapper;

Сейчас Основной компонент

import MainWrapper from 'MainWrapper';
    class Main extends Component {
      return {
        <MainWrapper> /* your main compnent element */</MainWrapper>
      }
    }
export default Main;

То же самое вы можете создать несколько фантики для каждой ситуации