Как определить, какой компонент коммутатора загружен в реагирующий маршрутизатор

Question

У меня есть система маршрутизации в реакции и компонент Layout, который обертывает систему.Я пытаюсь выяснить, как выяснить, какой компонент маршрута был выбран в моем компоненте Layout

ReactDOM.render(
<BrowserRouter>
    <Layout>

            <Switch>
                <Route exact strict path={"/home"} component={home} />
                <Route exact path={"/page1"} component={page1} />
                <Route exact path={"/page2"} component={page2} />
                <Route exact path={"/page3"} component={page3}/>
                <Route exact path={"/page4"} component={page4}/>

            </Switch>

    </Layout>
    </BrowserRouter>
,document.getElementById('root'));

Есть ли способ сделать что-то вроде this.props.children.selectedRoute в моем Layout Component, чтозатем вернуть имя компонента?

Answer 1

BrowserRouter в react-router-dom использует контекст React для передачи контекста маршрутизатора вниз по дереву компонентов.

Простой способ узнать, какой маршрут просматривается, - это подключить Layout к предоставленному контексту маршрутизатора.Вы можете сделать это, объявив свойство contextTypes для компонента Layout следующим образом.

class Layout extends React.Component {
  static contextTypes = {
    router: PropTypes.object
  };

  render() {
    // Get the current path
    const { route: { location: { pathname } } } = this.context.router;
    const { children } = this.props;

    // Find child route that match current path.
    // This assumes that all routes are current children of the Layout, 
    // with a Switch use `children.props.children` instead of `children`
    // to find the selected route.
    const selectedRoute = children
                           .filter(route => route.props.path === pathname)
                           .pop();
    // continue play.

    return <div>{children}</div>
  }

Answer 2

Layout находится внутри BrowserRouter, и это действительно возможно.

Все, что вам нужно сделать, это обернуть компонент Layout внутри withRouter компонента более высокого порядка.

export default withRouter(Layout)

, а затем внутри Layout вы можете получить доступ к опоре маршрутизатора, location

function Layout({ location }) {
  if(location.pathname==="page1") {
    // Do something
  } else {
    // Other cases
  }
}