react-router路径一直重定向到404

Question

我有一个路由器链接，可以成功地将我带到产品管理页面:

<Route
path='/auth/products/product-management'
render={() => <ProdManagement {...this.props} />}
/>
<Redirect path="*" to="/404" />

在ProdManagement组件中，我有两个按钮，onClick应该带我到其他页面:

const addProduct = () => {
props.history.push('/auth/products/add-product')
}
const editProduct = () => {
props.history.push('/auth/products/edit-product')
}

ProdManagement组件的返回路由设置如下:

return (
<div> 
<Switch>         
<Route
exact
path='/auth/products/add-product'
render={() => <AddProduct {...this.props} />}
/>
<Route
exact
path='/auth/products/edit-product'
render={() => <EditProduct {...this.props} />}
/>
</Switch>
</div>
)

但是每次我点击按钮，我都被发送到404页面。有人知道我哪里做错了吗?我知道addProduct()函数被调用，因为我记录一些东西到控制台。

更新:我移动了两条路线(添加&编辑)到与主/auth/products/product-management相同的级别，他们现在工作。不知道为什么，但它修复了它们。

Answer 1

ProdManagement组件在路径"/auth/products/product-management"上呈现，当它触发到路径"/auth/products/add-product"或"/auth/products/edit-product"的导航动作时，路径现在不再匹配"/auth/products/product-management",ProdManagement被卸载，因此其他路径未被加载，<Redirect path="*" to="/404"/>是剩下的渲染。

就像你已经发现的那样，简单的解决方案就是声明路由，它们总是被挂载和匹配的。

<Switch>
... other more specific routes ...
<Route
path="/auth/products/product-management"
component={ProdManagement}
/>
<Route exact path="/auth/products/add-product" component={AddProduct} /> 
<Route exact path="/auth/products/edit-product" component={EditProduct} />
... other less specific routes ...

<Redirect path="*" to="/404" />
</Switch>