ルートパラメータが反応しない

Question

ルートパラメータを使用しようとしていますが、パラメータを取得できません。

ページには何も表示されません。未定義または空白のようです。

「wedding /：pageName」からどのようにパラメータを取得しますか？

ここには何が欠けていますか？それはparamsを得るための最善の方法ですか？

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

Weddi ngPage.js

import React, { Component } from 'react'; 
 

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

 
export default WeddingPage;

Answer 1

WeddingからWeddingPageに小道具を渡していないためです。

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

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

export default Wedding; 

WeddingPage.js：それにpropsを受け入れ、合格する

Wedding.jsニーズは、子供の

import React, { Component } from 'react'; 

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

export default WeddingPage; 

Answer 2

では、ルータを反応させ、あなたがあなたのケースではthis.props.match.params.pageName

Answer 3

としてルータのparamsにアクセスすることができ、最初のあなたは、ページ名を取得する必要があります this.props.match.params.pageName
さらに
<WeddingPage pageName={this.props.match.params.pageName} />

01のようweddingPageコンポーネントにページ名の小道具を渡すより様 Wedding成分中のparams