React-router - pass props to handler component

Asked
Active3 hr before
Viewed126 times

11 Answers

routerpropsreactcomponent
90%

Since new release, it's possible to pass props directly via the Route component, without using a Wrapper. For example, by using render prop.,With the react-router v5, we can create routes by wrapping with a component, so that we can easily pass props to the desired component like this.,You could also use the RouteHandler mixin to avoid the wrapper component and more easily pass down the parent's state as props:

Component:

class Greeting extends React.Component {
  render() {
    const {text, match: {params}} = this.props;

    const {name} = params;

    return (
      <React.Fragment>
        <h1>Greeting page</h1>
        <p>
          {text} {name}
        </p>
      </React.Fragment>
    );
  }
}

Usage:

<Route path="/greeting/:name" render={(props) => <Greeting text="Hello, " {...props} />} />

This is your example with changes applied:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var CommentsWrapper = React.createClass({
  render: function () {
    return (
      <Comments myprop="myvalue"/>
    );
  }
});

var Index = React.createClass({
  render: function () {
    return (
      <div>
        <header>Some header</header>
        <RouteHandler/>
      </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={CommentsWrapper}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});
load more v
88%

index.js

React.render((
  <Router history={new HashHistory()}>
    <Route component={App}>
        <Route
          path="/hello"
          name="hello"
          component={views.HelloView}
          fruits={['orange', 'banana', 'grape']}
        />
    </Route>
  </Router>
), document.getElementById('app'));

App.js

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>{this.props.children}</div>;
  }
}

HelloView.js

class HelloView extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>
      <ul>
        {this.props.route.fruits.map(fruit => 
          <li key={fruit}>{fruit}</li>
        )}
      </ul>
    </div>;
  }
}

Route

<Route name="filter" path="filter/:name" handler={Parent} />

Parent Component

render: function () {
  if (this.props.params.name === 'price') {
    return <Child1 {...this.getPriceProps()} />
  } else if (this.props.params.name === 'time') {
    return <Child2 {...this.getTimeProps()} />
  } else {
    // something else
  }
}
load more v
72%

Part 6: How to pass props to the route component in React router (this post),Part 7: Redirect routes in react router,This is the recommended way to pass props in react router.

// App.js
...

const PropsPage = () => {  return (    <h3>Props Page</h3>  );};
const App = () => {
  return (
    <section className="App">
      <Router>
        ...
        <Link to="/404-not-found">404</Link>
        <Link to="/props">Passing Props</Link>        <Switch>
          ...
          <Route exact path="/props" component={PropsPage} />          <Route component={NoMatchPage} />
        </Switch>
      </Router>
      <a href="/about">about with browser reload</a>
    </section>
  );
};

export default App;
load more v
65%

So if you’re not supposed to pass a function to component, what’s the solution? Instead of using the component prop, use the render prop.,So to recap, if you need to pass a prop to a component being rendered by React Router v4, instead of using Routes component prop, use its render prop. With render, you’re in charge of creating the element and can pass the component any props you’d like.,Unfortunately, this won’t work. React Router won’t forward that prop onto the component. Instead, it will just ignore it.

<Route path='/dashboard' component={Dashboard} />
load more v
75%

When building an app with React Router v5, sometimes you’ll need to pass props through the Link component to the new route. In this post, we’ll break down how that process works.,There are two different ways to pass data from the Link component through to the new route. The first is through URL Parameters and the second is through state.,So in our app, we may have a Link component that looks like this.

<Route path="/:handle">
   <Profile />
</Route>
load more v
40%

If you'd rather not write wrappers, I guess you could do this:,My preferred way is wrap the Comments component and pass the wrapper as a route handler.,Since new release, it's possible to pass props directly via the Route component, without using a Wrapper. For example, by using render prop.

If you'd rather not write wrappers, I guess you could do this:

class Index extends React.Component { 

  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>
        Index - {this.props.route.foo}
      </h1>
    );
  }
}

var routes = (
  <Route path="/" foo="bar" component={Index}/>
);
load more v
22%

 Pretag team - issue, fix, solve, resolve
60%

I just ran into a situation where I'd want to reuse a handler component in two or more routes. But to be able to do this I need to pass props in order to change its behavior between both locations., Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. ,I've used something like this before where the route handler also had other props passed to it when rendered:

<Route name="one" handler={SameComponent}/>
<Route name="two" handler={SameComponent}/>
load more v
48%

 Pretag team - issue, fix, solve, resolve
23%

One of the ways to handle navigation in React applications is using react-router and it is pretty easy to use, let's see an example:,react-router is an easy and potent way to handle navigation in our React apps, the only thing we should take into account is that it should be tailored to our requirements, sometimes the easy/quick/happy way is not the best way.,What can we do? Basically, we should change our approach, instead of use component attribute, we should use render attribute, and give it a try:

One of the ways to handle navigation in React applications is using react-router and it is pretty easy to use, let's see an example:

react - router
load more v
90%

 Pretag team - issue, fix, solve, resolve

Other "router-props" queries related to "React-router - pass props to handler component"