使用react-router传递多个URL参数作为props报错，求正确实现方式

嘿，这个问题我之前踩过坑！先给你拆解下问题根源，再给你靠谱的解决方案～

为啥会出现这个错误？ #

你遇到的Uncaught SyntaxError: Unexpected token <，本质上不是路由写法的问题——你的多参数路由代码本身是正确的。这个错误大多是因为静态资源加载路径错误：
当路由变成多层级（比如/xxx/123/456）时，如果你的JS、CSS等静态资源用的是相对路径（比如<script src="bundle.js"></script>），浏览器会把它解析成/xxx/123/bundle.js，而服务器上根本没有这个路径的文件，就会返回你的index.html页面。浏览器拿到HTML后，误以为这是JS文件去解析，自然就会抛出这个错误（因为HTML开头是<）。

解决方案 #

1. 改用绝对路径加载静态资源 #

打开你的public/index.html，把所有静态资源的引用改成绝对路径（开头加斜杠）：

<!-- 原来的相对路径 -->
<script src="bundle.js"></script>
<!-- 改成绝对路径 -->
<script src="/bundle.js"></script>

这样不管路由层级多深，浏览器都会从域名根目录去查找资源，不会出错。如果是Create React App项目，还可以用%PUBLIC_URL%来确保路径正确：

<script src="%PUBLIC_URL%/bundle.js"></script>

2. 配置React Router的basename（如果部署在子路径） #

如果你的应用不是部署在域名根目录，而是子路径（比如https://your-domain.com/my-app/），需要给<BrowserRouter>加上basename属性：

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

这会让所有路由都基于/my-app这个前缀，同时静态资源路径也要对应调整（或者用%PUBLIC_URL%自动适配）。

3. 配置服务器 fallback 到index.html #

React Router是客户端路由，当用户直接在地址栏输入/xxx/123/456这种多层级地址时，服务器会尝试找这个路径下的物理文件，找不到就会返回404。所以需要配置服务器，让所有路由请求都返回index.html：

• Express服务器示例：

const express = require('express');
const path = require('path');
const app = express();

// 静态资源目录
app.use(express.static(path.join(__dirname, 'build')));

// 所有请求都返回index.html
app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000);

• Create React App部署到Netlify：在public文件夹新建_redirects文件，内容为：

/*    /index.html   200

• Nginx服务器：在配置文件里添加：

location / {
  try_files $uri $uri/ /index.html;
}

确认路由参数是否正确 #

解决完资源加载问题后，你可以在SessionViewer组件里通过props.match.params拿到三个参数：

const SessionViewer = (props) => {
  const { sessionID, tsFrom, tsTo } = props.match.params;
  // 这里可以使用这些参数做逻辑处理
  return <div>...</div>;
};

内容的提问来源于stack exchange，提问作者P A S H