根据路由反应将数据加载到组件中

Question

我刚开始学习React，我感觉我面临着大多数初学者都会面临的常见问题。我正在构建一个非常简单的React应用程序。我的目标是建立一个导航网站，并根据点击的导航项目改变一些动态内容。但是内容始终具有相同的布局，因此唯一需要更改的部分是显示在内容组件中的数据。

我设法构建了一个工作版本，但它感觉不对，因为它没有更新内容组件。相反，我为每个页面创建了一个从两个不同文件（data.js和data2.js）加载数据的新组件（List.js和List2.js）。我现在想知道如何使用一个组件（list.js）并且总是根据导航中点击的类别更新其内容。这是我当前的代码：

App.js

import React, { Component } from 'react' 
import List from '../components/List' 
import Nav from '../components/Nav' 
import data from '../src/data/data' 

require ('../src/sass/App.scss'); 

    class App extends Component { 

    render() { 
     return (
     <div className="wrapper"> 
     <Nav /> 
     {this.props.children} 



     </div> 
     ) 
     } 

    } 

    export default App 

routes.js

import React from 'react' 
import { Route, IndexRoute } from 'react-router' 
import App from '../components/App'; 
import List from '../components/List'; 
import List2 from '../components/List2'; 
import IndexPage from '../components/IndexPage'; 





const routes = (
    <Route path="/" component={App}> 
    <IndexRoute component={IndexPage} /> 
    <Route path="/list1" component={List} /> 
    <Route path="/list2" component={List2}/> 



    </Route> 
); 

export default routes; 

List.js

import React, { Component } from 'react' 
import Article from './Article' 
require ('../src/sass/List.scss'); 
import data from '../src/data/data' 

class List extends Component { 

    render() { 


    const listWebsites = data.map(websites => { 

     return (
      <Article key={websites.id} name={websites.name} preview={websites.description} image={websites.image} /> 
      ) 
    }) 

    console.log('our data is:', this.props.data) 
    return (
     <div className="wrapperList"> 
      {listWebsites} 

     </div> 
    ) 
    } 

} 

export default List 

个List2.js

import React, { Component } from 'react' 
import Article from './Article' 
require ('../src/sass/List.scss'); 
import data from '../src/data/data2' 

class List extends Component { 

    render() { 


    const listWebsites = data.map(websites => { 

     return (
      <Article key={websites.id} name={websites.name} preview={websites.description} image={websites.image} /> 
      ) 
    }) 

    console.log('our data is:', this.props.data) 
    return (
     <div className="wrapperList"> 
      {listWebsites} 

     </div> 
    ) 
    } 

} 

export default List 

Nav.js

import React, { Component } from 'react' 
import { Link } from 'react-router'; 
import data from '../src/data/data' 
require ('../src/sass/Nav.scss'); 

class Nav extends Component { 

render() { 
    return (
    <div> 
    <nav> 
     <ul> 
      <li><Link to="/list1" activeClassName="active">List1</Link></li> 
      <li><Link to="/list2" activeClassName="active">List2</Link></li> 


     </ul> 
    </nav> 
    </div> 
    ) 
    } 

} 

export default Nav 

data.js（data2.js结构相同）

const data = [ 
    { 
    'id': '1', 
    'name': 'Website1', 
    'description': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr ', 
    'image': 'website1.png', 

    }, 
    { 
    'id': '2', 
    'name': 'Website2', 
    'description': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr ', 
    'image': 'webstie2.jpg', 

    }, 
    { 
    'id': '3', 
    'name': 'website3', 
    'description': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr ', 
    'image': 'website3.jpg', 

    } 

export default data 

感谢您的帮助！

Answer 1

您可以在添加参数阵营路由器（未测试的代码）：

const routes = (
    <Route path="/" component={App}> 
    <IndexRoute component={IndexPage} /> 
    <Route path="/list1/:data" component={List} />  
    </Route> 
); 

然后，List组件上，做出反应路由器将参数添加到params属性：

import React, { Component } from 'react' 
import Article from './Article' 
require ('../src/sass/List.scss'); 

class List extends Component { 

    render() { 

    //We could do this elswere depending on the requirements and 
    //how the data will be loaded (maybe use componentDidMount and the state) 
    var data=[]; 
    if(this.props.params.data==="data1"){ 
     //Load data1 to data ... data=.... 
    }else{ 
     //Load other data ... data=.... 
    } 

    const listWebsites = data.map(websites => { 

     return (
      <Article key={websites.id} name={websites.name} preview={websites.description} image={websites.image} /> 
      ) 
    }) 

    console.log('our data is:', this.props.data) 
    return (
     <div className="wrapperList"> 
      {listWebsites} 

     </div> 
    ) 
    } 

} 

export default List 

<li><Link to="/list/data1" activeClassName="active">List1</Link></li> 
    <li><Link to="/list/data2" activeClassName="active">List2</Link></li> 

Here是：

最后你使用它有关这方面的文档。