在 BrowserRouter 初始化的组件中获取 location prop

Question

我试图让 react-router 与 transition-group 一起工作，但偶然发现了这个问题，我无法直接在此组件中访问 location 道具。有没有不需要创建另一个子组件的解决方案，我将包装到 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>
    );
  }
}

Answer 1

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

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