Question

在主要组件中，我使用开关

function Router(props) {

    return (<main>
        <Switch>
            <Route exact path='/prices/'
                   render={(props) => <PricesPage {...props} />}
            />
            <Route path="/prices/add/"
                   render={(props) => <PriceGroupAddFormConnected {...props}/>}
            />
        </Switch>
    </main>) 
}

在PricePage子项之一中，我定义了呈现对话框的路径

PricesPage：

function PricesPage(props) {

    return (<Child/>) 
}

孩子：

function Child(props) {

    return (
            <><Route exact path="/prices/dialog" component={Dialog}/>
            <Child1/></>)
        )

}

然后在child1中定义一个链接。

Child1：

function Child1(props) {

    return (
            <Link to="/prices/dialog"/>)
        )

}

预期：链接更改时->对话框打开

当前：链接已更改，但对话框未打开。但是随后我在主要组件中定义了路由，它起作用了，但是我需要在对话框中保留其他子组件，所以这还不够

Answer 1

点击/prices/时，将创建路由/prices/dialog，因为它位于<PricesPage>的子组件中。但是，当您前往/prices/dialog时，由于/prices/dialog与/prices/dialog与/prices/都不完全匹配/prices/add/，因此路由exact正在卸载。

您有2个选择：

删除<Route path='/prices/' render={(props) => <PricesPage {...props} />}上的/prices/dialog键。因此，当您点击/prices/时，将同时渲染/prices/dialog组件和/prices/add/组件（与/prices/dialog相同）
在其他路由器/prices/和/prices/add/旁边，在路由器中添加路由getenv()

如果需要单独的渲染，我建议使用第二个，如果可以同时具有多个渲染，我建议使用第一个。

反应路由器：子组件中定义的路由不起作用

1 个答案: