Passing Custom Props to Router Component in React-Router V4

Passing custom props to router component in react-router v4

You can pass props to the component by making use of the render prop to the Route and thus inlining your component definition. According to the DOCS:

This allows for convenient inline rendering and wrapping without the
undesired remounting explained above.Instead of having a new React
element created for you using the component prop, you can pass in a
function to be called when the location matches. The render prop
receives all the same route props as the component render prop

So you can pass the prop to component like

 <Route path="/" exact render={(props) => (<Home test="hi" {...props}/>)} />

and then you can access it like

this.props.test 

in your Home component

P.S. Also make sure that you are passing {...props} so that the
default router props like location, history, match etc are also getting passed on to the Home component
otherwise the only prop that is getting passed down to it is test.

Passing props to a component using a variable (not a static component) in React router 5

I think you can use the route.component as JSX <route.component /> but for naming consistency (capitalization) you could assign it to a const first

              {routes.map((route: RouteItem) => {
                const Component = route.component;
                return (
                  <Route
                    key={`${route.key}`}
                    path={`${route.path}`}
                    component={
                      (Component &&
                        ((props: any) => <Component {...props} />)) ||
                      DefaultComponent
                    }
                    exact
                  />
                );
              })}

https://codesandbox.io/s/react-router-dom-typescript-dynamic-component-s7n72?file=/src/index.tsx

Pass props to a component, React Router V4

Write it like this:

<Route path='/:id_of_the_album' render={props => <Profile {...props} /> } />

Now inside Profile component, it should be available by:

this.props.match.params.id_of_the_album

React Router 4 passing props through Route render doesn't work

It happens because you overriding props within arrow function.
Try to destructure Layout prop like that:

const Layout = ({signInWithEmail}) => (
// i can console.log(props) here and see props.signInWithEmail
  <div className="layout">
    // header etc...
    <main>
      <Switch>
       // ... other routes
        <Route
          path="/signin"
          render= {() => <SignIn onSubmit={signInWithEmail} />}           
        />
      </Switch>
    </main>
    // footer etc...
  </div>
)}

react-router - pass props to handler component

UPDATE

Since new release, it's possible to pass props directly via the Route component, without using a Wrapper. For example, by using render prop.

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} />} />

Codesandbox Example

---

OLD VERSION

My preferred way is wrap the Comments component and pass the wrapper as a route handler.

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);
});

react routing using RouteComponentProps and custom props

A React component in Typescript is defined like this:

class ComponentName extends React.Component<PropsType, StateType> { ... }

In this case BookingSiteOverview accepts props of type RouteComponentProps<{}> and uses a state of type IBookingSiteOverviewState.

RouteComponentProps<{}> does not include a definition for getProfiles, so that is causing the errors.

EDIT

getProfiles is defined in IBookingSiteOverviewProps (per the OP) so changing the props for BookingSiteOverview to RouteComponentProps<{}> & IBookingSiteOverviewProps resolves the issue:

export class BookingSiteOverview extends React.Component<RouteComponentProps<{}> & IBookingSiteOverviewProps, IBookingSiteOverviewState> {
    constructor(props: RouteComponentProps<{}> & IBookingSiteOverviewProps) {
        super(props);
        ...
    }
    ...
}

React router pass props to route component

<Route> does not pass custom props to components. Use render function instead:

<Route exact path='/FileUpload' render={
  (props) => <FileUpload {...props} acc={this.state.account} ethAdd={this.state.ethAddress} />
} />

As SakoBu mentioned you need to change your constructor:

constructor(props) {
    super(props);
    this.state = {
        account: this.props.acc,
        ethAddress: this.props.ethAdd
    };
}

---

Related Topics