node.js - 路由参数不适用于 React

Question

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

该页面根本没有显示任何内容，似乎未定义或空白。

如何从“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;

婚礼页面.js

import React, { Component } from 'react';

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

export default WeddingPage;

Answer 1

使用反应路由器，您可以访问路由器参数 this.props.match.params.pageName

Answer 2

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

Answer 3

这是因为你没有通过 from Weddingto传递道具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;