Spring 请求映射和路径变量并使用参数定向到 react-router 路径

Question

我在 springboot 上提供一个 react 应用程序。目前我已经设置了反应路由器。当在 React 应用程序中单击 a 时，它会被发送到 Spring 视图控制器，该控制器会查找 URL 并使用 react 应用程序返回“索引”模板。然后 React 路由器设置了几个路由。 现在基本路线正在工作，但我现在正在尝试将参数发送到新页面。我可以将 ID 发送到 ViewController，但 React-router 无法识别路径并返回 404。 这是 ViewController.java 代码。

@RequestMapping(value = {"/book/{id}"})
public String getBook(@PathVariable("id") long id) {
    System.out.println("Id is " + id);
    return "index";
}

这是我试图指向的路线，位于 root.js 中。

<Route path="/book/:id" component={Book} />

Answer 1

我遇到了这个问题，发现使用 HashRouter 而不是 BrowserRouter 为我解决了这个问题。

我的 index.js（顶级 JS 文件）看起来像这样。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { HashRouter } from 'react-router-dom';

ReactDOM.render(<HashRouter><App /></HashRouter>, 
document.getElementById('root'));
registerServiceWorker();

不需要对应的RequestMapping方法，实际上我并没有为React应用设置任何RequestMappings。这似乎起作用了，因为 HashRouter 为 React 应用程序中的所有路径添加了一个井号前缀，这“愚弄”了 Spring 绕过处理 URL，让 React 随意处理它。

免责声明：我是一个 React 新手，花了几天时间试图解决这个问题，但在网上找不到答案。当我终于找到答案时，我认为不分享它是意味深长的。我不知道这是否是一个好的解决方案，甚至是最好的解决方案，但它很简单而且很有效。