경로 매개 변수가 작동하지 않습니다.

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 :

이

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에 액세스 할 수 있습니다, 라우터 반응
<WeddingPage pageName={this.props.match.params.pageName} />

01 등 weddingPage 성분 Wedding 성분 this.props.match.params.pageName
보다 더욱 통과 추천 된 pageName 소품에 PARAMS