React Router V4 - 如何只有参数？答案

【问题标题】：React Router V4 - How to only have params?React Router V4 - 如何只有参数？
【发布时间】：2019-08-07 02:48:42
【问题描述】：

我有几个组件。当一个参数在路径中时，一个将处于活动模式，其余将处于非活动模式并显示一条消息。

所有组件都显示在页面上。一个处于活动状态，其余处于非活动状态但可见。
组件需要读取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>
        );
    }
}

组件1：

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

【问题讨论】：

对不起，我不明白你的问题。无论路由，您都可以访问 URL 参数。也许你有一些代码要显示？
@vicodin - 添加代码...我需要读取页面中的 routeProps 并将其传递给 Component1、Component2 和 Component3

标签： reactjs react-router

【解决方案1】：

由于您没有使用<Router> 包装您的组件，您应该使用withRouter 单独包装它们。您可以在docs 中探索 withRouter API。

基本上在你需要用Router导入的组件文件中：

./components/Compoent1/Compoent1

import { withRouter } from "react-router";

并用它包装组件的导出。

export default withRouter(Compoent1)

这将允许Compoent1 访问所有路由器道具。

【讨论】：

【解决方案2】：

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

【讨论】：