Question

我在理解如何保留路由以及如何使用reactjs进行嵌套路由方面遇到一些困难。另一个问题是由于路线，如何将道具传递给正在渲染的组件。这是代码。这是代码的渲染部分。目前，我在家里/优惠券上我想添加新路线说应该路线到优惠券/ 5 或说优惠券/ xyz / 5 或说优惠券/ xyz / pqr / 6 或说coupons / xyz / pqr / abc / 10

 render(){
    console.log("this.props",this.props);
    const {classes,Provider}=this.props;
    return(
        <Fragment>
            <FlexHeader
              center={
                <Fragment>
                    <h1>Coupons</h1>
                 </Fragment>
               }
              />
             {this.renderContent()}
             <Route path="/coupons/:id" component ={CouponsRedeem}/>
         </Fragment>);
 }

另一件事是当我从一个地方路由到另一个地方时如何传递道具。

onCardClick =()=>{
        console.log('card clicked');
        this.props.history.push({
              pathname: '/coupons/:5',
       })
    }

我也希望将道具从当前组件传递到新渲染的Component。我包括了更多的代码。

class Coupons extends React.Component{
    onCardClick =()=>{
        console.log('card clicked');
        this.props.history.push({
              pathname: '/coupons/5',
       })
    }
    render(){
       const {classes,Provider}=this.props;
        return(
              <Fragment>
              <FlexHeader
                 center={
                     <Fragment>
                       <h1>Coupons</h1>
                     </Fragment>
                 }
              />
              {this.renderContent()}
              <Route path="/coupons/:id" component ={CouponsRedeem}/>

              </Fragment>
        );
    }
}

这是App.js的路由部分

<Fragment>
    <CssBaseline />
    <Switch>
      <Route
        path="/cricket/:description/:id"
        component={CricketMatchCenterLoadable}
      />
     <Route
        path="/football/:description/:id"
        component={FootballMatchCenterLoadable}
      />
      <Route path="/news/:slug/:id" component={NewsDetailLoadable} />
      <Route path="/login" component={LoginLoadable} />
      <Route path="/home" component={HomeRootLoadable} />
      <Route path="/landing1" component={LandingRedLoadable} />
      <Route
        exact
        path="/"
        render={routeProps => (
          <Landing
            prefetchHomeRoute={HomeRootLoadable.preload}
            {...routeProps}
          />
        )}
      />
    </Switch>
    <BottomSnackbar />
  </Fragment>

当我单击它时，它转到另一条路线回家/板球。这里是homeroot.js

<Fragment>
        <Switch>
          <ProtectedRoute
            path={match.url + "/me"}
            renderFunc={routeProps => <ProfileLoadable {...routeProps} />}
          />
          <ProtectedRoute
            path={match.url + "/coupons"}
            renderFunc={routeProps => <CouponsLoadable {...routeProps} />}
          />
          <Route path={match.url + "/news"} component={NewsFeedLoadable} />

          <Route path={match.url} component={MatchesListRoute} />


        </Switch>

        <BottomNavigation
          value={getIndexForRoute(pathname)}
          onChange={this.handleChange}
          showLabels
          className={classes.root}
        >
          <BottomNavigationAction label="Matches" icon={<AllInclusiveIcon />} />
          <BottomNavigationAction label="Trending" icon={<WhatsHotIcon />} />
          {isAuthenticated && [
            <BottomNavigationAction
              key="couponsTab"
              label="Coupons"
              icon={<LocalOfferIcon />}
            />,
            <BottomNavigationAction
              key="meTab"
              label="Profile"
              icon={<PersonIcon />}
            />
          ]}
        </BottomNavigation>
      </Fragment>

Answer 1

在将路径传递到历史记录时无需使用onCardClick =()=>{ console.log('card clicked'); this.props.history.push({ pathname: '/coupons/5', }) }。push

comment_list = comment_container.findAll("div", {"class" : "comment-date"})
D =[]

  for commentDate in comment_list:
    year, month, day = map(int, commentDate.split('-'))
    date_object = datetime(year, month, day)  
    D.append(date_object)

print(min(D))

难以理解如何将路线保留在嵌套路线中以及将所有道具传递到该路线

1 个答案: