根據路由反應將數據加載到組件中

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是：

最後你使用它有關這方面的文檔。