React Router基本实现

Question

I am trying to implement React router and I have a class called App from which I want to call ExpenseApp. For ExpenseApp to work, it requires 'data' which I want to pass. Also, my first page of get loaded should be ExpenseApp. As far as I understood react-router, the class name to be specified in the '/' path is the first page to be loaded. The question is how can I pass data from react router to the component.

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'))

And normally when I was displaying the component without using the react-router, I was doing something like

I am still confused with the concepts of react-router, how can I implement this?

Answer 1

As far as I know, you usually would want to fetch data from within the component, but if it is not possible or you do not want to do this, you could try using decorateComponentWithProps ( https://github.com/belle-ui/decorateComponentWithProps )

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

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

Given that the ExpenseApp 's prop name is data

Edit: As found out in the comments, you also need to change

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

to

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

For the code to work, or you can also change the usage of <Router /> to <BrowserRouter />

Answer 2

maybe you can try this one :

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

this is using react router v4, hope can solve your issue :)