reactjs - 在初始化 BrowserRouter 的组件中获取 location 属性

Question

我正在尝试react-router使用transition-group但偶然发现了这个问题，即我无法location直接在此组件中访问 prop。是否有不需要创建另一个子组件的解决方案，我可以将其包装进去withRouter以访问location?

class App extends React.Component {
  public render() {
    return (
      <BrowserRouter basename={process.env.PUBLIC_URL}>
        <React.Fragment>
          <Navigation language={"en"} />
          <Switch>
            <TransitionGroup>
             <CSSTransition location={this.props.location} timeout={300} classNames="fade"> 
              <Route
                path="/p"
                render={() => {
                  return (
                    <Layout>
                      <P/>
                    </Layout>
                  );
                }}
              />
              <Route
                path="/v"
                render={() => {
                  return (
                    <Layout>
                      <V/>
                    </Layout>
                  );
                }}
              />
             </CSSTransition> 
            </TransitionGroup>
          </Switch>
        </React.Fragment>
      </BrowserRouter>
    );
  }
}

标签： reactjsreact-routerreact-router-v4react-router-dom

Answer 1

在使用render方法渲染组件时，您需要将 Router 道具传递给正在渲染的组件，例如

   <Route
            path="/p"
            render={(props) => {
              return (
                <Layout {...props}>
                  <P/>
                </Layout>
              );
            }}
          />
          <Route
            path="/v"
            render={(props) => {
              return (
                <Layout {...props}>
                  <V/>
                </Layout>
              );
            }}
          />