Reactjs 反应路由器：子组件中定义的路由不工作_Reactjs_React Router

Reactjs 反应路由器：子组件中定义的路由不工作

reactjs

Reactjs 反应路由器：子组件中定义的路由不工作,reactjs,react-router,Reactjs,React Router,在主要部件中，我使用开关 function Router(props) { return (<main> <Switch> <Route exact path='/prices/' render={(props) => <PricesPage {...props} />} /> <Route path=

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

function Router(props) {

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

功能路由器（道具）{
返回(
}
/>
}
/>
) 
}

在其中一个PricesPage子级中，我定义了渲染对话框的路径

价格：

function PricesPage(props) {

    return (<Child/>) 
}

功能价格页面（道具）{
返回（）
}

儿童：

function Child(props) {

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

}

函数子（道具）{
返回(
)
)
}

在child1中，我定义了一个链接

儿童1：

function Child1(props) {

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

}

功能儿童1（道具）{
返回(
)
)
}

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

当前：链接已更改，但对话框“未打开”。但是我在主组件中定义了路由，它可以工作，但是我需要将其他子组件保持在dialog下，所以这是不够的

当您点击

/prices/

时，您的路由

/prices/dialog

被创建，因为它位于

的子组件中。但是，当您转到

/prices/dialog

时，您的路线

/prices/dialog

被卸载，因为

/prices/dialog

与

/prices/

都不完全匹配

您有两种选择：

移除

上的

精确

键。因此，当您点击

/prices/dialog

时，将同时呈现

/prices/

组件和

/prices/dialog

组件（与

/prices/add/

相同）

将您的路线

/prices/dialog

添加到路由器中，将其他路线

/prices/

和

/prices/Add/

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