0

I have couple of components. When a param is in path one will be in active mode and rest will be in inactive mode and show a message.

  • All components are present on page. One is active, the rest are inactive but visible.
  • Components need to read url params.

If I use path then at each moment, I can show only one component. The first solution that comes to mind is having no path but only have route params. I need to read route params on app.js to show active/deactive component also read the same params in the child components inside app.js

When we don't have any path to match: How can I read route params in app.js? How can I pass route params to child components?

import React, { Suspense } from 'react';
import Spinner from './components/shared/Spinner';
import { RouteComponentProps, Router } from 'react-router-dom';

const Compoent1 = React.lazy(() => import(/* webpackChunkName: 'Compoent1' */  './components/Compoent1/Compoent1'));
const Compoent2 = React.lazy(() => import(/* webpackChunkName: 'Compoent2' */  './components/Compoent2/Compoent2'));
const Compoent3 = React.lazy(() => import(/* webpackChunkName: 'Compoent3' */  './components/Compoent3/Compoent3'));

export default class App extends React.Component {


    render() {
        return(
            <div className="container">
                <Suspense>
                    <Compoent1 routeProps={routeProps}/>
                </Suspense>

                <Suspense>
                    <Compoent2 routeProps={routeProps}/>
                </Suspense>

                <Suspense>
                    <Compoent3 routeProps={routeProps}/>
                </Suspense>
            </div>
        );
    }
}

Component1:

import React, { MouseEvent } from 'react';
import { RouteComponentProps } from 'react-router';

interface IProps {
    routeProps: RouteComponentProps;
    onUpdate: any;
}

export default function ProductSelector(props: IProps) {

    const test = (e: MouseEvent) => {
        props.onUpdate('test');
    };

    return(
        <button onClick={test}>Next</button>
    );
}

2
  • Sorry, I don't understand your problem. You can have access to URL params regardless route. Maybe you have some code to show?
    – flppv
    Mar 16, 2019 at 1:05
  • @vicodin - Added code... I need to read routeProps in the page also pass it to Component1, Component2 and Component3
    – Neda
    Mar 16, 2019 at 1:14

2 Answers 2

0

Since you're not wrapping your components with <Router> you should to wrap them individually with withRouter. You can explore withRouter API in the docs.

Basically in your component files you need to import withRouter:

./components/Compoent1/Compoent1

import { withRouter } from "react-router";

and wrap component's export with it.

export default withRouter(Compoent1)

This will allow Compoent1 to access all router props.

0

In App.js component make a function which you will pass as props to the all child components to update state with the url params:

App.js

export default class App extends React.Component {

state = {
  urlParams: []
}


getUrlParamsFromChild = (urlParams) => {
  this.setState({ urlParams: urlParams })
}

render() {
    return(
        <div className="container">
            <Suspense>
                <Compoent1 routeProps={routeProps} getUrlParams={this.getUrlParamsFromChild) />
            </Suspense>

            <Suspense>
                <Compoent2 routeProps={routeProps} getUrlParams={this.getUrlParamsFromChild) />
            </Suspense>

            <Suspense>
                <Compoent3 routeProps={routeProps} getUrlParams={this.getUrlParamsFromChild)/>
            </Suspense>
        </div>
    );
}

}

Child Components:

Make your child components to be class based.

componentDidMount() {
  // get params from route
  const urlParams = this.props.match.params

// call function from props to update state from parent, with new child params
  this.props.getUrlParams(urlParams)
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.