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

Question

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

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

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

<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其实是有自己的道具的，你可以connect去路由器获取那些道具

小例子：

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

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

这将确保两条路线都将呈现 SessionViewer，然后：

在 SessionViewer 中创建一个 componentDidMount() 方法

withRouter

React-Router-Dom 将默认为您提供不同的道具 -> 添加 export default withRouter(SessionViewer) 到您的 SessionViewer class
因为你现在已经连接了 Class（到路由），你可以在你的 props 中访问 match，这个 props 是由 react-router 创建的并且包含关于匹配的信息这条路线：例如 match.params.sessionId 将包含路线中的 :sessionId，这意味着如果我有 /10/from/to

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

现在在您的 componentDidMount 方法中，您可以 setState 所有 match.params 您需要进行条件渲染，例如。

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

Answer 2

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

"unexpected token" 错误的出现有多种原因。我运行遇到了类似的问题，在我的例子中，问题是在 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>

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

Passing multiple URL parameters as props using react-router?

react-router-v4

react-router-dom