代码之家 › 专栏 › 技术社区 › tcoulson

无法访问react router中的match.props

react-router reactjs

tcoulson · 技术社区 · 6 年前

我要发布一些代码,因为看起来我没有包含任何东西。

import React from 'react';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import {updateSearch, getSearchResults} from '../actions/qb-actions';
import {valueAccepted} from '../actions/tree-actions';
import {addNewElement} from '../services/commonComponents';
import QueryBuilder from './QueryBuilder';
import SearchResults from './SearchResults';
import FontAwesome from 'react-fontawesome';
import {checkIncludeColumns} from '../services/commonComponents';
import {removeSpaces} from '../services/values';
import { Button } from 'reactstrap';

class SearchBooksAdvanced extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    componentDidMount(){

        const { match: { params } } = this.props;
//I want to use match.params here, but it is coming back undefined. 
    }

    qb=()=>{
    }

    postResults = () => {
        this.qb();
    }

    render() {
        return (<div >
            <QueryBuilder postResults={this.postResults}/>
            <SearchResults 
                qb={qb => {this.qb = qb}}
                tree={this.props.tree.tree}
            />
        </div>);
    }
}

function mapStateToProps(state){
     return{
        options: state.options,
        tree: state.tree,
        goToSearch: state.goToSearch
    };
}

export default connect(mapStateToProps, {updateSearch, getSearchResults})(SearchBooksAdvanced);

一个简短的类。以下是我的行程:

<main>
    <Switch>
        <AuthenticatedRoute login={this.props.login} path={`${this.props.match.path}`} exact component={Landing} isLoggedOut={this.props.login.ckUser.isLoggedOut}/>
        <AuthenticatedRoute login={this.props.login} path={`${this.props.match.path}/search/:searchID`} exact component={SearchBooksAdvanced}  isLoggedOut={this.props.login.ckUser.isLoggedOut}/>
        <AuthenticatedRoute login={this.props.login} path={`${this.props.match.path}/book/:bookID`} exact component={BookDetail}  isLoggedOut={this.props.login.ckUser.isLoggedOut}/>
        <AuthenticatedRoute login={this.props.login} path={`${this.props.match.path}/routing/:routingID/:versionID`} exact component={RoutingDetail}  isLoggedOut={this.props.login.ckUser.isLoggedOut}/>
        <Redirect to={`${this.props.match.url}`} />
    </Switch>
</main>

我的授权课程如下:

import React               from 'react';
import { Route, Redirect } from 'react-router-dom';

const AuthenticatedRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props =>
        (

            !props.isLoggedOut && localStorage.getItem('user') ?

            <Component {...props}/>
         :
            <span><Redirect to={{
                pathname: '/bis/login',
                state: { from: props.location }
            }}/><span>redirected</span></span>

    )}/>
);

export default AuthenticatedRoute

奇怪的是,我的props.match.params.someID为我的另外两个类工作,但是当我为SeachBooksAdvanced类调用它时,它找不到它。如果你看到我的代码不一致,请告诉我。蒂亚。

1 回复 | 直到 6 年前

Tholle 6 年前

你想使用 withRouter 使用的临时路由组件 connect 打开。

import { withRouter } from "react-router-dom";

// ...

export default withRouter(
  connect(
    mapStateToProps,
    { updateSearch, getSearchResults }
  )(SearchBooksAdvanced)
);