Question

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

所有组件都在页面上。一个处于活动状态，其余处于非活动状态但可见。
组件需要读取url参数。

如果我每次都使用path，那么我只能显示一个组件。我想到的第一个解决方案是没有路径，而只有路径参数。我需要阅读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

由于您没有使用<Router>包装组件，因此应该使用withRouter分别包装组件。您可以在docs中使用withRouter API进行探索。

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

./ components / Compoent1 / Compoent1

import { withRouter } from "react-router";

并使用它包装组件的导出。

export default withRouter(Compoent1)

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

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

React Router V4-如何只有参数？

2 个答案: