React路由器基本实现

我想实现React路由器，我有一个名为App的类，我想从中调用ExpenseApp。对于ExpenseApp的工作，它需要我想传递的'数据'。另外，我的第一页加载应该是ExpenseApp。就我所了解的react-router而言，要在'/'路径中指定的类名称是要加载的第一个页面。问题是如何将数据从响应路由器传递到组件。React路由器基本实现

import React from 'react' 
import ReactDOM from 'react-dom' 
import {ExpenseApp} from './expense-app.js' 
import {Switch, BrowserRouter, Route} from 'react-router-dom' 
import {FullBlog} from './FullBlog.js' 

var data=[ 
    { 
    "Author":"Dan Brown", 
    "Book":"Inferno" 
     }, 
    { 
    "Author":"Jeffrey Archer", 
    "Book":"Be careful what you wish for" 
}, 

    { 
    "Author":"Paulo Coelho", 
    "Book":"The Alchemist" 
    } 
]; 
class App extends React.Component{ 
    render(){ 
     return(
      <Router> 
       <Route path='/' component={ExpenseApp}/> 
       <Route path='fullblog' component={FullBlog}/> 
      </Router> 
      ) 
    } 
} 

ReactDOM.render(<App/>, document.getElementById('container'))

，通常当我不使用反应路由器显示的成分，我在做类似的东西

我还是有疑惑的反应路由器的概念，我怎么能实现呢？

来源

2017-07-21 Aayushi

提取'ExpenseApp'组件内的数据。这可以工作吗？ –

其实我必须传递数据，以便维护层次结构。@ DavinTryon – Aayushi

[React Router Training]（https://github.com/ReactTraining/react-router）给它一个阅读！，您不会将数据传递给路由器，但会传递组件。 – Gerardo

也许你可以试试这个：

<Router> 
    <Route exact path='/' render={() => <ExpenseApp data={data} />}/> 
    <Route path='fullblog' component={FullBlog}/> 
</Router>

这是使用反应路由器v4，希望能解决你的问题:)

来源

2017-07-21 13:23:17

感谢它的工作！ – Aayushi

只需一个

即可包含标签 – Aayushi

据我所知，你通常会想从组件中获取数据，但如果它是不可能的，或者你不想这样做，你可以尝试使用decorateComponentWithProps（https://github.com/belle-ui/decorateComponentWithProps）

import decorateComponentWithProps from 'decorate-component-with-props'; 

// ... 
<Route path='/' component={decorateComponentWithProps(ExpenseApp, {data})} />

鉴于ExpenseApp的道具名称是data

编辑：正如在评论中发现了，你也需要改变

import {Switch, BrowserRouter, Route} from 'react-router-dom'

到

import {Switch, BrowserRouter as Router, Route} from 'react-router-dom'

对于代码工作，或者你也可以改变<Router />使用情况，以<BrowserRouter />

来源

2017-07-21 13:08:19

而在ExpenseApp中，一个简单的this.state = {data：this.props.data}会起作用吗？ – Aayushi

技术上，是的。但是'props'对象中已经有完全相同的数据，为什么要直接将它映射到'state'？ –

只是试图理解函数decorateComponentWithProps（） – Aayushi

React路由器基本实现

回答

相关问题