路由参数不适用于 React

Question

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

该页面什么也没有显示，似乎未定义或空白。

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

Wedding.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;

Answer 1

使用 React 路由器，您可以访问路由器参数 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

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

Wedding.js 需要接受并传递 props 给它的 child:

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;

路由参数不适用于 React

Route Param not working with React

node.js

reactjs

react-router

routeparams