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实际上为您做到了，让我解释一下：

反应路由器实际上有自己的道具，您可以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类中
由于您现在拥有一个连接到路由的类（可以与路由连接），因此您可以在道具内部访问match，因此这些道具由react-router创建，并包含有关此路线匹配内容的信息：例如{ {1}}将包含路由中的：sessionId，这意味着如果我有match.params.sessionId

/10/from/to

现在在componentDidMount方法内部，您可以match.params = { sessionId: 10, tsFrom: from, tsTo: to } setState进行条件渲染的所有示例。

希望它会有所帮助，如果您需要的话，我可以做得更深一些，但是我想保持简单

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>

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

2 个答案: