更改基於路由器的應用程序狀態

Question

我正在創建一個應用程序，其中顯示基於路由器位置的數據 例如 localhost：8080/us應該顯示「USA flag and some text to United States」 本地主機：8080 /在應該顯示「印度國旗和與印度的一些文本」

我有兩個減速器一個印度等對美國和我有一個根減速機爲以下所示的

import {combineReducers} from 'redux'; 
 

 
import IndiaData from './IndiaData'; 
 
import USData from './UsData'; 
 

 
const rootReducer = combineReducers({ 
 
    IndiaData, 
 
    USData, 
 
    ActiveData 
 
}); 
 

 

 
export default rootReducer;

我的樣本減速IndiaData是波紋管

export default function() { 
 
    return [ 
 
     { 
 
       "StateName": "AP", 
 
       "StateImg": "../static/image1.jpg", 
 
      }, 
 
      { 
 
       "StateName": "TS", 
 
       "StateImg": "../static/image2.jpg", 
 
      }, 
 
      { 
 
       "StateName": "TN", 
 
       "StateImg": "../static/image3.jpg", 
 
      } 
 
     ] 
 
}

我使用mapStateToProps在我的反應組件，請在下面找到

import React, {Component} from 'react'; 
 
import {connect} from 'react-redux'; 
 

 
import styles from '../styles/custom.css' 
 

 
class CountryData extends React.Component { 
 
    Country(){ 
 
     
 
     return this.props.usdata.map((Data)=>{ 
 
      return(
 
       <div className="col-md-4"> 
 
        <img className="panel" src={Data.StateImg}/> 
 
        <p>{Data.StateName}</p> 
 
       </div> 
 
      ); 
 

 
     }) 
 
    } 
 
     
 
    render(){ 
 
     return(
 
      <div> 
 
       <div className="container margin-top jumbotron"> 
 
         {this.Country()} 
 
       </div> 
 
      </div> 
 
     ); 
 
    } 
 
} 
 

 
function mapStateToProps (state){ 
 

 
    return { 
 
     indiadata: state.IndiaData, 
 
     usdata: state.USData, 
 
    }; 
 
} 
 
export default connect(mapStateToProps)(CountryData);

的 碼

和我的路由器配置如下圖

import React from 'react'; 
 
import {Route, IndexRoute} from 'react-router'; 
 

 
import App from './components/app'; 
 
import CountryData from './components/CountryData'; 
 

 

 
export default (
 
\t <Route path ="/" component={App}> 
 
\t \t <Route path="in" component={CountryData} /> 
 
\t \t <Route path="us" component={CountryData} /> 
 
\t </Route> 
 
);

所以最後，我應該能讀什麼是出現在URL路徑，然後顯示，美國數據或印度的數據動態，能對某些一個人請幫我一下嗎？

非常感謝您的支持！

Answer 1

，您可以撥打路線，像這樣：

然後訪問該country PARAM在通過this.props.params.country容器。

在您的mapStateToProps函數中，您可以使用此常數來呈現正確的國家/地區數據。

return this.props.data.map((Data)=>{ 
     return(
      <div className="col-md-4"> 
       <img className="panel" src={Data.StateImg}/> 
       <p>{Data.StateName}</p> 
      </div> 
     ); 

    }) 
... 
// other code here 
... 
function mapStateToProps (state, props){ 
    return { 
     data: props.params.country === 'in' 
      ? state.IndiaData 
      : state.USData 
    }; 
} 

另一種方法是導出兩個不同的連接組件。

return this.props.data.map((Data)=>{ 
     return(
      <div className="col-md-4"> 
       <img className="panel" src={Data.StateImg}/> 
       <p>{Data.StateName}</p> 
      </div> 
     ); 

}) 
    ... 
    // other code here 
    ... 
    function IndiaData (state){ 
     return { 
      data: state.IndiaData 
     }; 
    } 
    function USData (state){ 
     return { 
      data: state.USData 
     }; 
    } 

export const India = connect(IndiaData)(CountryData); 
export const US = connect(USData)(CountryData); 

然後在路線：

import React from 'react'; 
import {Route, IndexRoute} from 'react-router'; 

import App from './components/app'; 
import { India, US } from './components/CountryData'; 


export default (
    <Route path ="/" component={App}> 
     <Route path="in" component={India} /> 
     <Route path="us" component={US} /> 
    </Route> 
);