路由參數不能與反應

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;

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的道具。

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; 

Answer 2

隨着反應的路由器，您可以訪問路由器PARAMS作爲this.props.match.params.pageName

Answer 3

在你的情況，你首先需要獲得頁面名PARAMS在Wedding部件等 this.props.match.params.pageName
和比進一步通過頁面名道具weddingPage部件等
<WeddingPage pageName={this.props.match.params.pageName} />