javascript - How to pass props/state through Link and Route

Sunday, January 20, 2019

javascript - How to pass props/state through Link and Route - react.js

Answer

I'm in the middle of creating my first web app made with react.js (create-react-app and react-router 3.0.2, no redux) and i've encountered a problem with passing a property through the Link and Route (i'm not sure if what i'm trying to do is a correct approach in "react way" of making an app)

Idea is that AddCost component (which im not pasting since it's irrelevant) should render a little bit different depending on a property passed onto it. However i'm not sure how to do it (and if it's even possible that way)

Index.js is the main rendering component, App.js is the main container and div with className='content' is where i want to {Home} and {AddCost} to render interchangeably (when i clink on one of the links in {Home} i want to {AddCost} render in the same place as {Home} was rendered before (and that works) but i cant get to pass a prop to the {AddCost} component depending on which of the links i click)

So the main questions is as in title, how to pass information from {Home} to {AddCost} when react-router is used for routing?

//Index.js

import React from 'react'

import ReactDOM from 'react-dom'
import App from './components/App'
import Home from './components/Home'
import Stats from './components/Stats'
import Account from './components/Account'
import AddCost from './components/AddCost'
import { Router, Route, IndexRoute, hashHistory } from 'react-router'
import './index.css'

ReactDOM.render(

  
    
      
       ()}/>
      
      
    
  ,
  document.getElementById('root')
)


//App.js

import React, { Component } from 'react'
import './App.css'
import Header from './Header'

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      costType: null
    }
  }
  render() {
    return (
      
          
          
            {this.props.children}

          

      

    )
  }
}

export default App

//Home.js


import React, { Component } from 'react'
import { Link } from 'react-router'
import './Home.css'

class Home extends Component {
  render() {
    const costTypes = [
      { text: 'Health', icon: 'fa fa-heart' },
      { text: 'Bills', icon: 'fa fa-home' },
      { text: 'Gas', icon: 'fa fa-car' },

      { text: 'Vacation', icon: 'fa fa-plane' },
      { text: 'Lunch', icon: 'fa fa-coffee' },
      { text: 'Groceries', icon: 'fa fa-shopping-cart' },
      { text: 'Leisure', icon: 'fa fa-glass' },
      { text: 'Leisure', icon: 'fa fa-glass' },
    ]
    const listItems = costTypes.map((type, i) => (
      
        
        {type.text}


      
    ))
    return (
      
        {listItems}

      

    )
  }
}


export default Home

Additionally i'll gladly accept information about any major mistakes or bad practice examples.

Answer

You have several options here. One of them is to use route params.

1) First you need to change path attribute of your route

2) Inside your AddCost comonent you can get type as this.props.params.type and decide what to render

class AddCost extends React.Component {
  render() {
    console.log(this.props.params.type)
  }
}

3) Finaly use another to attribute in your links

Blog

Sunday, January 20, 2019