React Router V4 - Как иметь только параметры?

Question

У меня есть пара компонентов.Когда параметр находится в пути, он будет в активном режиме, а остальные будут в неактивном режиме и покажут сообщение.

• Все компоненты присутствуют на странице.Один активен, остальные неактивны, но видимы.
• Компоненты должны читать параметры URL.

Если я использую путь, то в каждый момент я могу показать только один компонент.Первое решение, которое приходит на ум - не иметь пути, а иметь только параметры маршрута.Мне нужно прочитать параметры маршрута в app.js, чтобы показать активный / деактивный компонент, а также прочитать те же параметры в дочерних компонентах внутри app.js

Когда у нас нет пути для сопоставления: Как я могу прочитатьпараметры маршрута в app.js?Как передать параметры маршрута дочерним компонентам?

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

Answer 1

В компоненте App.js создайте функцию, которую вы будете передавать как реквизиты всем дочерним компонентам для обновления состояния с помощью параметров url:

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

}

Дочерние компоненты:

Сделайте так, чтобы ваши дочерние компоненты были основаны на классах.

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

Answer 2

Поскольку вы не оборачиваете свои компоненты <Router>, вам следует обернуть их индивидуально withRouter.Вы можете изучить API роутера в документах .

По сути, в файлы ваших компонентов необходимо импортировать с помощью Router:

. / Components / Compoent1 / Compoent1

import { withRouter } from "react-router";

и обернуть экспорт компонента с помощьюit.

export default withRouter(Compoent1)

Это позволит Compoent1 получить доступ ко всем реквизитам маршрутизатора.