从父级到子级路由的传递状态

Question

I am new to react and I am trying to send data from my parent component "Dashboard" to a child component "AddData". I know the syntax to do this normally, but what is the syntax to do this when a child is connected to parent through Route?

Shown below is my Dashboard.jsx:

import {withStyles} from '@material-ui/core'
import CssBaseline  from '@material-ui/core/CssBaseline'
import PropTypes    from 'prop-types'
import * as React   from 'react'
import {Route}      from 'react-router-dom'
import {Home}       from './scenes/home'
import {A}        from './scenes/a'
import {B}        from './scenes/b'
import {AddData}   from '../adddata'
import {VisualizeData} from '../visualizedata'
import {Header}     from './components/header'
import {Sidebar}    from './components/sidebar'
import styles       from './Dashboard.styles'

class Dashboard extends React.Component {

  constructor() {
    super();

    this.state = {
      trainPercentageDashboard : "null",
      featuresDashboard : [],
      labelsDashboard :  [],
    }
  }

  render() {
    const {classes} = this.props
    console.log(window.location.href);
    var url_ = new URL(window.location.href);
    console.log(url_);
    return (

        <div className={classes.root}>
          <CssBaseline/>
          {url_.pathname !== '/neuralnet' &&
              <Header/>
          }
          <Sidebar/>
          <main className={classes.content}>
            {url_.pathname !== '/neuralnet' &&
                <div className={classes.toolbar}/>
            }
            <Route path="/adddata" component={AddData}/>
            <Route exact path="/visualize" component={VisualizeData} />
            <Route exact path='/home' component={Home}/>
            <Route exact path='/neuralnet' component={A}/>
            <Route exact path='/b' component={B}/>
            <Route exact path='/' component={B}/>
          </main>
        </div>
    )
  }

}

Dashboard.propTypes = {
  classes: PropTypes.object.isRequired,
  theme  : PropTypes.object.isRequired,
}

export default withStyles(styles, {withTheme: true})(Dashboard)

I went through this , but this was not mentioned in it.

Answer 1

Try this:

<Route
  path='/adddata'
  render={(props) => <AddData {...props} someotherprop={someotherprop} />}
/>

Note that the passed prop can be a part of the state as well. So you can pass the state as this.state.someotherprop .

Answer 2

If you want to pass data down to a component using react router, you can change your Route component to look like this.

<Route
  path="/adddata" 
  render={(props) => (<AddData {...props}>)}
/>

This is a good article on explaining why to use render rather than component but the gist of it is that it is for performance.

Answer 3

You can pass data from parent component using react-router, is very simple update your code with this, and your issue will be fixed

import {withStyles} from '@material-ui/core'
import CssBaseline  from '@material-ui/core/CssBaseline'
import PropTypes    from 'prop-types'
import * as React   from 'react'
import {Route}      from 'react-router-dom'
import {Home}       from './scenes/home'
import {A}        from './scenes/a'
import {B}        from './scenes/b'
import {AddData}   from '../adddata'
import {VisualizeData} from '../visualizedata'
import {Header}     from './components/header'
import {Sidebar}    from './components/sidebar'
import styles       from './Dashboard.styles'

class Dashboard extends React.Component {

  constructor() {
    super();

    this.state = {
      trainPercentageDashboard : "null",
      featuresDashboard : [],
      labelsDashboard :  [],
      name:'rizwan',
    }
  }

  render() {
    const {classes} = this.props
    console.log(window.location.href);
    var url_ = new URL(window.location.href);
    console.log(url_);
    return (

        <div className={classes.root}>
          <CssBaseline/>
          {url_.pathname !== '/neuralnet' &&
              <Header/>
          }
          <Sidebar/>
          <main className={classes.content}>
            {url_.pathname !== '/neuralnet' &&
                <div className={classes.toolbar}/>
            }
            <Route 
                 path="/adddata"
                 component={AddData} 
                 currentStep={this.state.name} />
            <Route exact path="/visualize" component={VisualizeData} />
            <Route exact path='/home' component={Home}/>
            <Route exact path='/neuralnet' component={A}/>
            <Route exact path='/b' component={B}/>
            <Route exact path='/' component={B}/>
          </main>
        </div>
    )
  }

}

Dashboard.propTypes = {
  classes: PropTypes.object.isRequired,
  theme  : PropTypes.object.isRequired,
}

export default withStyles(styles, {withTheme: true})(Dashboard)

Now open your child component: "adddata"

and console props

console.log('wao', this.porps)

thanks,

like and vote up