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>
    );
  }
}

Answer 1

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

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

在初始化BrowserRouter的组件中获取位置信息

1 个答案: