Question

我正在尝试使用Route params，但我无法获得params。

该页面只显示任何内容，似乎未定义或空白。

如何从＆＃34; wedding /：pageName＆＃34;？

获取参数

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

＆＃34; pageName＆＃34;不是身份证，这是一个问题吗？

提前致谢

我的App.js

＆＃13;

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);

＆＃13;

Wedding.js

＆＃13;

import React from 'react';
import WeddingPage from './weddings/WeddingPage';

const Wedding = () => {
  return (
    <div>
      <WeddingPage />
    </div>
  );
}

export default Wedding;

＆＃13;

WeddingPage.js

＆＃13;

import React, { Component } from 'react';

class WeddingPage extends Component {
  render() {
    return (
      <div>
        {this.props.pageName}
      </div>
    );
  }
}

export default WeddingPage;

＆＃13;

Answer 1

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

Answer 2

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

Answer 3

这是因为您没有将道具从parentFolderID传递到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

Route Param无法使用React

3 个答案: