英文:
react-router paths keep redirecting to 404
问题
我有一个成功跳转到产品管理页面的路由链接：
<Route
path='/auth/products/product-management'
render={() => <ProdManagement {...this.props} />}
/>
<Redirect path="*" to="/404" />
在ProdManagement组件内部，我有两个按钮，点击时应该带我到其他页面：
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相同的级别，现在它们可以正常工作了。
不确定为什么，但这修复了它们。
英文:
I have a router link that works successfully taking me to a product-management page:
<Route
path='/auth/products/product-management'
render={() => <ProdManagement {...this.props} />}
/>
<Redirect path="*" to="/404" />
Inside the ProdManagement component I have two buttons that onClick should take me to other pages:
const addProduct = () => {
props.history.push('/auth/products/add-product')
}
const editProduct = () => {
props.history.push('/auth/products/edit-product')
}
The return for ProdManagement component has the routes set looks like this:
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>
)
But every time I click the buttons I get sent to the 404 page.
Anyone have an idea what I'm doing wrong here?
I know the addProduct() function is being called as I log something to the console.
UPDATE:
I moved the two routes (add & edit) to the same level as the main /auth/products/product-management and they work now.
Not sure why, but it fixed them.
答案1
得分: 1
以下是翻译好的部分：
"The ProdManagement component is rendered on path /auth/products/product-management and when it triggers navigation actions to paths /auth/products/add-product or /auth/products/edit-product the path now no longer matches /auth/products/product-management and ProdManagement is unmounted so the other paths are not mounted and <Redirect path="*" to="/404"/> is what is left to render.
As it seems you've discovered, the easy solution is to just declare the routes where they are always mounted and matchable.
<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>
英文:
The ProdManagement component is rendered on path "/auth/products/product-management" and when it triggers navigation actions to paths "/auth/products/add-product" or "/auth/products/edit-product" the path now no longer matches "/auth/products/product-management" and ProdManagement is unmounted so the other paths are not mounted and <Redirect path="*" to="/404"/> is what is left to render.
As it seems you've discovered, the easy solution is to just declare the routes where they are always mounted and matchable.
<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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论