Question

我有点新的反应和我一步一步学习。我遇到了一个问题，那就是当我尝试访问道具中的location参数时，它会返回undefined。我试图找到解决方案，但大多数人已经写过我必须在路由器中添加我的组件，但我将它包装在路由器中但仍然，我无法访问位置参数

export const abcdContainer = withRouter(connect(
    mapStateToProps,
    mapDispatchToProps
)(abcd));

我试图访问和组件中的location参数，但问题是其中没有位置参数。有人可以告诉我它出了什么问题

如果有人知道什么是错的，请告诉我，我已经花了一半的时间而且我无法弄清楚

使用网址添加的代码和版本

路由器版本=＆gt; 2.8.1

网址：http://localhost:3000/somePage?someParam=cm9oYW5qYWxpbHRlYWNoZXJAZ21haWwuY29t

abcdContainer.js

const mapStateToProps = (state, ownProps) => {
   // some code over here
}

const mapDispatchToProps = (dispatch, ownProps) => {
           // some code over here
};

export const abcdContainer = withRouter(connect(
    mapStateToProps,
    mapDispatchToProps
)(abcd));

abcd.jsx

class abcd extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
           // setting state over here
        };
    }

    abcdFunction(){
        if (this.props.location.query.someParam !== undefined){ // trying to extract someParam value  from location
            // some code over here
        }
    }

    render() {
        // some code over here   
    }
}


export default CSSModules(abcd, styles, { allowMultiple: true });

这是流程。路由器重定向到容器，然后容器重定向到实际组件

Route.js

export const Routes = ({ store }) => (
    <Provider store={store}>
        <Router history={browserHistory}>
            <Route path="/" component={aContainer}>
                <IndexRoute component={IContainer} />
                // some routes    
                <Route path="/openAbcd" component={() => (<abcdContainer caller="aaaaaaa" />)} />
               // some routes
            </Route>

           // some routes
        </Router>
    </Provider>
);

Routes.propTypes = {
    store: React.PropTypes.object.isRequired,
};

Answer 1

<Route path="/openAbcd" component={() => (<abcdContainer caller="aaaaaaa" />)} />

如果使用内联箭头函数渲染组件，为什么不直接将道具传递给组件？那你就不需要withRouter()了。像这样：

<Route path="/openAbcd" component={props => (<abcdContainer caller="aaaaaaa" {...props} />)} />

Also the docs of react-router v2.8.1 says about withRouter()：

包含另一个组件以提供 props.router 的HoC（高阶组件）。

它不提供location，而是router作为道具。我建议您将react-router更新为v4或至少更新v3。

编辑：“但为什么没有隐含地插入道具？”：

React知道两种类型的组件。 Stateless functional components and class-based components。功能组件是接受带有数据的单个props对象参数并返回React元素的函数。再看看你的代码行：

<Route path="/openAbcd" component={() => (<abcdContainer caller="aaaaaaa" />)} />

您将箭头函数() => (<abcdContainer caller="aaaaaaa" />)传递给<Route>元素，该元素是函数组件的内联定义，它将props作为参数并返回呈现的React元素，在这种情况下这是你的<abcdContainer>。但正如您所看到的，通过使用空括号() => (<AComponent />)定义它来省略函数中的props参数。 React不会自动将props传递给在功能组件内呈现的子组件。将<abcdContainer>包装到内联功能组件时，您自己负责将道具传递给它。

但是如果你将基于类的/功能组件的类/变量传递给component元素的<Route> prop，就像你在其他路由中那样，那么它将渲染这个组件隐式地将道具传递给它，因为它没有包含在功能组件中：

// this will directly render <aContainer> and pass the props to it
<Route path="/" component={aContainer}>

你所做的是创建一个“功能未命名的包装器组件”，它不带任何道具，也不会向下传递任何道具。

请注意，您不应广泛使用withRouter()。该HOC仅用于将路由器注入到不由匹配路由本身呈现的组件中，并且例如是你的组件树更深入。在你的情况下，你不需要它。

道具中缺少的位置（ReactJS）

1 个答案: