使用 react-router 将多个 URL 参数作为道具传递？

Question

当我如下传递一个参数时，一切都按预期工作。

<Switch>
    <Route exact path="/" component={SessionViewer} />
    <Route path="/:sessionID" render={
        (props) => <SessionViewer { ...props }/>
    } />
</Switch>

但是，当我尝试使用 react-router 将多个（不仅仅是一个）动态 URL 参数作为道具传递时：

<Switch>
    <Route exact path="/" component={SessionViewer} />
    <Route path="/:sessionID/:tsFrom/:tsTo" render={
        (props) => <SessionViewer { ...props }/>
    } />
</Switch>

页面未加载并抛出以下错误：

Uncaught SyntaxError: Unexpected token <

有没有合适的方法来做到这一点？

Answer 1

我明白你想要做什么，但这不是你做的，react-router 在某种意义上实际上是为你做的，让我解释一下：

React-router其实有自己的props，你可以connect到router去获取这些props

小例子：

首先，将您的路由更改为：

<Switch>
    <Route exact path="/" component={SessionViewer} />
    <Route path="/:sessionID/:tsFrom/:tsTo" component={SessionViewer} />
</Switch>

这将确保两个路由都会呈现 SessionViewer，然后：

1. 在 SessionViewer 中创建 componentDidMount() 方法

2. 如果你在组件上使用 withRouter 方法，React-Router-Dom 默认会为你提供不同的 props -> 将 export default withRouter(SessionViewer) 添加到你的 SessionViewer 类中

3. 既然你现在有一个连接的类（到路由），你可以在你的 props 中访问match，这个 props 是由react-router 创建的，并包含有关此路由中匹配内容的信息：例如match.params.sessionId 将包含路线中的 :sessionId ，这意味着如果我有 /10/from/to

match.params = {
    sessionId: 10,
    tsFrom: from,
    tsTo: to
}

4. 现在在你的componentDidMount方法里面你可以setState所有你需要的match.params例如条件渲染。

希望对你有帮助，如果你需要，我可以更深入，但我宁愿保持简单

Answer 2

在 Stackoverflow 上搜索我的 Uncaught SyntaxError: Unexpected token < 错误后，我发现 this answer 有助于解决问题。我也贴在这里：

“意外令牌”错误的出现可能有多种不同的原因。我遇到了类似的问题，在我的情况下，问题是在 html 中加载生成的包的脚本标签是这样的：

<script src="scripts/app.js"></script>

当导航到带有参数的路由时（嵌套路由或具有多个段的路由也会发生同样的事情），浏览器会尝试使用错误的 url 加载脚本。在我的例子中，路由路径是'user/:id'，浏览器向http://127.0.0.1:3000/user/scripts/app.js而不是http://127.0.0.1:3000/scripts/app.js发出请求。解决方法很简单，把脚本标签改成这样：

<script src="/scripts/app.js"></script>