如何使用 react 路由器和 spring boot controller-Java 学习之路

这是我的 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'时它说白标签错误。

我完全混淆了如何使用反应路由器和控制器，任何人都可以建议我的方式。

我只是通过为我的 spring 启动控制器中的每个请求返回index.html来实现路由。

1 回答

我使用过滤器将请求转发到 index.html，如果它不是静态资源或不是 api 调用。

如果它们在/resources/static 中，则 Spring 引导会自动为静态资源提供服务。我将它们保存在特定文件夹/resources/static/ rct中以便于过滤。 (我不希望头痛与正则表达式)

index.html 反应应用的路径：

<script type="text/javascript" src="http://localhost:8080/rct/js/myreactapp.js"></script>

现在过滤器 RedirectToIndexFilter.java

@Component
public class RedirectToIndexFilter implements Filter {
    private final Logger logger = LoggerFactory.getLogger(this.getClass());

    @Override
    public void doFilter(ServletRequest request,
                         ServletResponse response,
                         FilterChain chain) throws IOException, ServletException {

        HttpServletRequest req = (HttpServletRequest) request;
        String requestURI = req.getRequestURI();

        if (requestURI.startsWith("/api")) {
            chain.doFilter(request, response);
            return;
        }

        if (requestURI.startsWith("/rct")) {
            chain.doFilter(request, response);
            return;
        }

        // all requests not api or static will be forwarded to index page. 
        request.getRequestDispatcher("/").forward(request, response);
    }

}

控制器到服务器 index.html

@Controller
public class AppController {
    private final Logger logger = LoggerFactory.getLogger(this.getClass());

    @GetMapping(value = {"/", ""})
    public String getIndex(HttpServletRequest request) {
        return "/rct/index.html";
    }

}

控制器到服务器 api 调用

@RestController
public class ProjectController {

    private final ProjectService projectService;

    public ProjectController(ProjectService projectService) {
        this.projectService = projectService;
    }

    @GetMapping("/api/v1/projects/{id}")
    public ProjectData getProject(@PathVariable Long id) {
        projectService.get(id);
        ...
    }

所以任何不是 api 或 static 的调用都会被转发到 index。通过转发，您可以根据需要保留网址，但是转发到 index.html

回复于 2024-04-26T17:22:29+08:00

如何使用 react 路由器和 spring boot controller

1 回答

相关问题