Javascript 基于react中的路由将数据加载到组件中
我刚刚开始学习React,我觉得我面临着大多数初学者都会面临的一个共同问题。我正在构建一个非常简单的React应用程序。我的目标是建立一个网站的导航和一些动态内容的变化,根据导航项目,点击。但是,内容始终具有相同的布局,因此唯一需要更改的部分是内容组件中显示的数据 我成功地构建了一个工作版本,但它感觉不对,因为它没有更新内容组件。相反,我为每个页面创建了一个新组件(List.js和List2.js),用于从两个不同的文件(data.js和data2.js)加载数据。我现在想知道如何使用一个组件(list.js)并始终根据在导航中单击的类别更新其内容。这是我当前的代码: App.jsJavascript 基于react中的路由将数据加载到组件中,javascript,node.js,reactjs,routing,Javascript,Node.js,Reactjs,Routing,我刚刚开始学习React,我觉得我面临着大多数初学者都会面临的一个共同问题。我正在构建一个非常简单的React应用程序。我的目标是建立一个网站的导航和一些动态内容的变化,根据导航项目,点击。但是,内容始终具有相同的布局,因此唯一需要更改的部分是内容组件中显示的数据 我成功地构建了一个工作版本,但它感觉不对,因为它没有更新内容组件。相反,我为每个页面创建了一个新组件(List.js和List2.js),用于从两个不同的文件(data.js和data2.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
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;
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
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
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
谢谢你的帮助 您可以使用(未测试的代码)在React Router中添加参数: 最后,您可以将其用于:
<li><Link to="/list/data1" activeClassName="active">List1</Link></li>
<li><Link to="/list/data2" activeClassName="active">List2</Link></li>
列表1
清单2
这是关于此的文档。谢谢,似乎这是一个仅适用于两个导航选项的选项,对吗?请解释如何将数据1加载到数据和将数据2加载到数据?是否不再需要导入数据?
const routes = (
<Route path="/" component={App}>
<IndexRoute component={IndexPage} />
<Route path="/list1/:data" component={List} />
</Route>
);
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>