reactjs - 如何使用 React 路由器和 Spring Boot Controller

Question

这是我的index.js 文件

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import App from './components/App';

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

这是 App.js

import React, { Component } from 'react';
import Main from './Main';

class App extends Component {
render() {
return (
      <div>
        <Main />
      </div>
  );
 }
}

export default App;

这是我的 Main.js 文件

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from './Home';
import AdminHome from './AdminHome';

class Main extends Component {
render() {
return (
        <Switch>
          <Route exact path='/admin' component={AdminHome}/>
          <Route exact path='/' component={Home}/>
        </Switch>
  );
 }
}

export default Main;

路由器没有路由到/admin 但它路由到/，当我运行应用程序并点击 url 'localhost:8080/admin' 时，它显示白色标签错误。

我完全困惑如何使用 react 路由器和 Controller ，任何人都可以建议我一种方法。

我仅通过为 Spring Boot Controller 中的每个请求返回 index.html 来实现路由。

Answer 1

将 api 之外的所有内容发送到您的 React 应用程序的一个简单方法是创建一个使用 RegEx 的 API Controller :

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ReactAppController {

    @RequestMapping(value = { "/", "/{x:[\\w\\-]+}", "/{x:^(?!api$).*$}/**/{y:[\\w\\-]+}" })
    public String getIndex(HttpServletRequest request) {
        return "/index.html";
    }

}

这个 Controller 只是将所有内容重定向到index.html，允许react和react-router发挥其魔力。

正则表达式的工作原理如下:

• '/' - 匹配根
• '/{x:[\\w\\-]+}' - 匹配第二个 \ 之前的所有内容。例如。 \foo
• '/{x:^(?!api$).*$}/**/{y:[\\w\\-]+}' - 匹配所有不匹配的内容以api开头。例如。 \foo\bar?page=1