Question

我有一个仪表板组件：

class DashboardPage extends Component {
  ....

  render() {
    const currentLocationPath = this.props.location.pathname;
    const isAuthenticated = true;

    // redirecting to /dashboard/main and saving current state to next path by pushing it to history object
    if (currentLocationPath === '/dashboard/' || currentLocationPath === '/dashboard') {
      this.props.history.push('/dashboard/main');
    }
    const { match } = this.props;

    if (isAuthenticated) {
      return (
        <div className="DashboardPage d-flex flex-column flex-grow">

          {/* email confirmation message for loggedin user to verify email ID*/}
          {!this.state.isEmailVerified ? <div className="email-confirmation">
            <span className="email-confirmation__desktop">
              Please check your inbox to confirm your email <strong>{'loggedin user\'s email'}</strong>.
            Didn’t receive an email? </span>
            <span className="email-confirmation__mobile">Confirm your email. </span>
            <a className="js-resend-email" href="#" onClick={this.resendMail}>Resend</a>
          </div> : null}

          <div className="DasboardPageMain d-flex flex-grow">

            {/* sidebar with slide-in effect from left on toggle */}

            <SidebarMenu currentLocationPath={currentLocationPath} channels={this.state.channels} />

            <div className="DashboardPage__overlay" />

            <main className="DashboardPage__Content d-flex flex-grow">
              {/* swapping DashboardPage's Child Components based on current url set by <Router/> */}
              <Route path="/dashboard/main" render={() => <Dashboard toggleModal={this.toggleModal} />} />
              <Route path="/dashboard/channels/:id/:channelName" component={VideoStats} />
              <Route path="/dashboard/edit_video" component={EditVideo} />
              <Route path="/dashboard/account" component={Account} />
              <Route path="/dashboard/socialMedia" component={SocialMedia} />
              <Route path="/dashboard/media-library" component={MediaLibrary} />
              <Route path="/dashboard/shares" component={Shares} />
              {/* <Route path="/dashboard/platform/:data"  component={Platforms} /> */}
              {/* <Route exact path="/dashboard/channels/:id/:channelName" component={VideosList} /> */}

            </main>

            {/* Modal With Nested Form to add Chaanel's info. */}
            <Modal className="addChannelModal" isOpen={this.state.modal} toggle={this.toggleModal} >
              <ModalBody>
                <AddChannelForm toggleModal={this.toggleModal} notifySuccess={this.notifySuccess} notifyError={this.notifyError} />
              </ModalBody>
            </Modal>
          </div>
          <Footer />

          {/* React toastify for toast notifications */}
          <ToastContainer
            className={{ textAlign: 'center' }}
            progressClassName={css({ background: '#007aff' })} />
        </div>
      );
    } else {
      return <Redirect to={'/'} />;
    }
  }
}

export default withRouter(DashboardPage);

现在我想访问<SidebarMenu>组件内的路由器url params，但在<SidebarMenu> console.log（this.props.match.params）内显示空对象。

但是如果我在<Route/>呈现的任何组件中执行console.log（this.props.match.params），例如：

<Route path="/dashboard/account" component={Account} />

我很容易在网址中找到所有参数。

有没有办法在<SidebarMenu>中访问所有这些与路由器相关的道具？

目前我有条件地在<SidebarMenu>内部渲染JSX：

const currentLocationPath = this.props.currentLocationPath;
const pathArray = window.location.pathname.split('/');

          { pathArray.length > 3 &&
            <Media tag="li" className={`${pathArray.length === 3 ? 'li-active' : null} li-channels align-items-center mb-1 py-1`}>
              {/* Chevron Icon */}
              <Media left middle tag="span" className="media-chevron-right ml-5 mr-1">
                <FontAwesomeIcon size="xs" icon={currentLocationPath == '/dashboard/main' ? faChevronRight : faChevronDown} className="" />
              </Media>

              {/* channel's main body */}
              <Media body className="text-center text-sm-left mb-3 mb-sm-0">
                <Media heading tag="h6" className="m-0">
                  Channels
                </Media>
              </Media>
            </Media> }

Answer 1

您未在match渲染中将<SidebarMenu>传递给<DashboardPage>。

您可以将其作为DashboardPage渲染中的道具传递：

<SidebarMenu match={match} currentLocationPath={currentLocationPath} channels={this.state.channels} />

或者用withRouter包装。

Answer 2

尝试在组件中像这样传递props

<Route path="/dashboard/account" render={ (props) => <Account {...props} /> }/>

将路由相关的道具传递给<route>未呈现的组件

2 个答案: