[英]Facing difficulty with configuring dynamic url params using react-router
I am trying to create dynamic URLs to render different content based on URL params
.我正在尝试创建动态 URL 以基于
URL params
呈现不同的内容。
When I use:当我使用:
<Route path="/example/:id" component={Example} />
and then if I go to /example/99 on my browser, I am getting an error message on the console that says:然后如果我在浏览器上将 go 转到/example/99 ,我会在控制台上收到一条错误消息:
GET http://localhost:8080/example/bundle.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost:8080/example/bundle.js net::ERR_ABORTED 404(未找到)
However, when I remove the forward slash before the param then it works fine.但是,当我删除参数之前的正斜杠时,它可以正常工作。 Eg when I use:
例如,当我使用:
<Route path="/example:id" component={Example} />
and then if I fo to /example99 on my browser, I am getting the expected results.然后如果我在浏览器上访问/example99 ,我会得到预期的结果。
How do I solve this, given I want to use /
while routing to different ids?鉴于我想在路由到不同的 id 时使用
/
,我该如何解决这个问题?
PFB the entire Routes.js file content. PFB 整个Routes.js文件内容。 Everything works fine until I add
/
before :id
一切正常,直到我添加
/
之前:id
import React from "react";
import { BrowserRouter, Route, Switch, Link, NavLink } from "react-router-dom";
import ExpenseDashboardPage from "../components/ExpenseDashboardPage";
import AddExpensePage from "../components/AddExpensePage";
import EditExpensePage from "../components/EditExpensePage";
import HelpPage from "../components/HelpPage";
import NotFoundPage from "../components/NotFoundPage";
import Header from "../components/Header";
const AppRouter = () => (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/" component={ExpenseDashboardPage} exact={true} />
<Route path="/create" component={AddExpensePage} exact={true} />
<Route path="/edit:id" component={EditExpensePage} />
<Route path="/help" component={HelpPage} exact={true} />
<Route component={NotFoundPage} />
</Switch>
</div>
</BrowserRouter>
);
export default AppRouter;
Not sure why, but rolling back to react-router-dom@4.1.2 fixed this for me.不知道为什么,但回滚到 react-router-dom@4.1.2 为我解决了这个问题。
I was getting the same problem while learning Andrew Mead React JS class.我在学习 Andrew Mead React JS class 时遇到了同样的问题。 By the way I fix this problem by using
":"
instead of "/"
.顺便说一句,我通过使用
":"
而不是"/"
来解决这个问题。 I really don't know exactly what is the problem.我真的不知道到底是什么问题。 But I fix this here is the code:
但我在这里解决这个问题是代码:
Before Problem:问题前:
<Route path="/edit/id" component={EditExpansepage} />
I solve this by using this line:我通过使用这一行来解决这个问题:
<Route path="/edit:id" component={EditExpansepage} />
and from browser I sending this URL:从浏览器我发送这个 URL:
http://localhost:8080/edit:99
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.