路由参数不适用于 React答案

【问题标题】：Route Param not working with React路由参数不适用于 React
【发布时间】：2017-10-09 15:00:51
【问题描述】：

我正在尝试使用路由参数，但我无法获取参数。

页面什么也不显示，看起来像未定义或空白。

如何从“wedding/:pageName”获取参数？

这里缺少什么？这是获取参数的最佳方式吗？

“pageName”不是ID，有问题吗？

提前致谢

我的 App.js

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import * as actions from '../actions';

import Header from './Header';
import Weddings from './Weddings';

class App extends Component {
  render() {
    return (
      <div className="container">
        <BrowserRouter>
          <div className="container">
            <Header />
            <Route path="/wedding/:pageName" component={Wedding} />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

export default connect(null, actions)(App);

婚礼.js

import React from 'react';
import WeddingPage from './weddings/WeddingPage';

const Wedding = () => {
  return (
    <div>
      <WeddingPage />
    </div>
  );
}

export default Wedding;

WeddingPage.js

import React, { Component } from 'react';

class WeddingPage extends Component {
  render() {
    return (
      <div>
        {this.props.pageName}
      </div>
    );
  }
}

export default WeddingPage;

【问题讨论】：

标签： node.js reactjs react-router routeparams

【解决方案1】：

这是因为您没有将 props 从 Wedding 传递到 WeddingPage。

Wedding.js 需要接受并将props 传递给它的孩子：

import React from 'react';
import WeddingPage from './weddings/WeddingPage';

const Wedding = props => {
    return (
        <div>
            <WeddingPage {...props} />
        </div>
    );
}

export default Wedding;

WeddingPage.js:

import React, { Component } from 'react';

class WeddingPage extends Component {
  render() {
    return (
      <div>
        {this.props.match.params.pageName}
      </div>
    );
  }
}

export default WeddingPage;

【讨论】：

【解决方案2】：

使用 react 路由器，您可以通过 this.props.match.params.pageName 访问路由器参数

【讨论】：

没有用。我收到错误“TypeError: Cannot read property 'params' of undefined”

【解决方案3】：

在您的情况下，首先您需要在 Wedding 组件中获取 pageName 参数，例如 this.props.match.params.pageName
而不是进一步将 pageName 道具传递给像
<WeddingPage pageName={this.props.match.params.pageName} />

这样的婚礼页面组件

【讨论】：

我试过这个，但没有用。我收到此错误：“TypeError：无法读取未定义的属性‘匹配’”