reactjs - React.lazy：this.props 为空

Question

我有 App.js 的简单测试项目

import React, { Component, Suspense } from 'react';
import { BrowserRouter, Route, NavLink } from 'react-router-dom';

const Posts = React.lazy(() => import('./containers/Posts'));

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <React.Fragment>
          <nav>
            <NavLink to="/posts/222">Posts Page</NavLink>
          </nav>
          <Route path="/posts/:id" render={() => (
              <Suspense fallback={<div>Loading...</div>}>
                <Posts {...this.props} />
              </Suspense>
            )}
          />
        </React.Fragment>
      </BrowserRouter>
    );
  }
}

export default App;

和容器/Posts.js

import React, {Component} from 'react';

class Posts extends Component {
    componentDidMount() {
        console.log(this.props);
    }

    render() {
        return (<h1>The Posts Page</h1>)
    }
};

export default Posts;

而 Posts 中的 this.props 是一个空对象。在这种情况下如何获得 this.props.match.params.id ？

标签： reactjs

Answer 1

Posts用withRouter从_react-router-dom

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class Posts extends Component {
    componentDidMount() {
        console.log(this.props);
    }

    render() {
        return (<h1>The Posts Page</h1>)
    }
};

export default withRouter(Posts);