ReactJS: Pass parameter from rails to react router to component

Question

I am trying to pass a value from the render function to the component:

= react_component('App', props: {test: 'abc'}, prerender: false)

Routes.jsx

<Route path="/" component={App} >

App.jsx (component)

class App extends React.Component {
  render() {
    return (
      <Header test={this.props.test}>
      </Header>
      {this.props.children}
      <Footer />
    );
  }
}

App.propTypes = { test: PropTypes.string };

There does not seem to be a coherent answer to this complete flow.

I have tried the following:

<Route path="/" component={() => (<App myProp="value" />)}/>

But this still does not answer the question of picking up the value provided by the initial render call(react_component)

@SterlingArcher could you provide an end to end answer using render? That would greatly help — Alex Jose
– Alex Jose, Commented Nov 15, 2017 at 0:59
@AlexJose sure, here's an example of how I use it with props github.com/RUJodan/Source-React/blob/master/src/index.jsx — Sterling Archer
– Sterling Archer, Commented Nov 15, 2017 at 15:12

JJJ · Accepted Answer · 2017-11-19 03:24:04Z

1

Looking for an end to end answer on how to pass a parameter from the "view" to the "react router" to the "component"

We will start from the view:

<%= react_component('MyRoute', {test: 123}, prerender: false) %>

Now we will create a component that holds our route:

class MyRoute extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <Switch>
        <Route path="/" render={() => <App test={this.props.test} />} />
        <Route path="/login" component={Login} />
      </Switch>
    )
  }
}

As you can see, we passed the test prop from the Route component to the App component. Now we can use the test prop in the App component:

class App extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <h1>{this.props.test}</h1>
    )
  }
}

answered Nov 19, 2017 at 3:24

JJJ

3,3525 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Jose Over a year ago

This seems to throw an error at the first step itself, while calling the component from the view. ArgumentError(wrong number of arguments (given 3, expected 1..2)

JJJ Over a year ago

try removing prerender: false

robinCTS · Accepted Answer · 2017-11-23 13:52:19Z

1

<Route path="/" render={attr => <App {...attr} test="abc" />} />

edited Nov 23, 2017 at 13:52

robinCTS

5,91614 gold badges33 silver badges38 bronze badges

answered Nov 23, 2017 at 13:06

syaku

1001 silver badge5 bronze badges

Comments

Faaiz Khan · Accepted Answer · 2017-11-23 20:59:01Z

In Router v3 you would do something like this

Wrap your App component under withRouter like this

import { withRouter } from 'react-router';

class App extends React.Component {
  render() {
    return (
      <Header test={this.props.test}>
      </Header>
      {
        this.props.children &&
        React.clone(this.props.children, {...this.props} )}
      <Footer />
    );
  }
}
App.propTypes = { test: PropTypes.string };
export const APP = withRouter(App);

And construct your routes like this...

<Route path="/" component={APP}>
  <Route path="/lobby" component={Lobby} />
  <Route path="/map" component={GameMap} />
  ...
</Route>

So your child routes will be rendered inside the APP children property an the props will be passed down to them.

Hope this helps!

Collectives™ on Stack Overflow

ReactJS: Pass parameter from rails to react router to component

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related