Question

我要发布一些代码，因为看来我没有添加任何内容。

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>

我的AuthenicatedRoute类如下：

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类调用它时却找不到它。如果您发现我的代码不一致，请告诉我。 TIA。

Answer 1

您要在使用connect的路由组件上使用withRouter HOC。

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

// ...

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

无法在React Router中访问我的match.props

1 个答案: