更改基于路由器的应用程序状态

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