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

Question

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

我设法构建了一个工作版本，但是感觉不对，因为它错过了更新内容组件。相反，我为每个页面创建了一个新组件（List.js 和 List2.js），它从两个不同的文件（data.js 和 data2.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

你可以在 React Router 中添加一个参数（代码未测试）：

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

然后，在 List 组件上，React Router 会将参数添加到 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 是关于此的文档。