대응 라우터 및 스프링 부트 컨트롤러로 작업하는 방법

대응 라우터 및 스프링 부트 컨트롤러로 작업하는 방법

여기 제 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;

그리고 이건 제 메인.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'을 누르면 흰색 레이블 오류가 표시됩니다.

저는 반응 라우터와 컨트롤러를 어떻게 사용해야 할지 완전히 혼란스럽습니다, 누가 저에게 방법을 제안할 수 있습니까?

스프링 부트 컨트롤러의 모든 요청에 대해 index.dll을 반환하는 것만으로 라우팅을 달성했습니다.

문제가 되지 않는 모든 것을 제공하는 간단한 접근 방식apiReact 앱은 ReGEx를 사용하는 API 컨트롤러를 만드는 것입니다.

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";
    }

}

이 컨트롤러는 단순히 모든 것을 index.html로 리디렉션하여 리액트 및 리액트 라우터가 마법을 사용할 수 있도록 합니다.

ReGEx는 다음과 같이 작동합니다.

• '/'루트와 일치합니다.
• '/{x:[\\w\\-]+}'두 번째까지 모든 것이 일치합니다.\예.\foo
• '/{x:^(?!api$).*$}/**/{y:[\\w\\-]+}'시작하지 않는 모든 것과 일치합니다.api예.\foo\bar?page=1

정적 리소스가 아니거나 api 호출이 아닌 경우 필터를 사용하여 index.html로 요청을 전달합니다.

정적 리소스는 /resources/static에 있는 경우 스프링 부팅을 통해 자동으로 제공됩니다.쉽게 필터링할 수 있도록 특정 폴더 /resources/static/rct에 보관합니다. (regex를 사용한 두통은 원하지 않습니다.)

index.반응 앱에 대한 경로:

<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 또는 정적이 아닌 모든 호출은 인덱스로 전달됩니다.전달을 통해 대응 라우터에서 필요에 따라 URL을 유지하지만 index.html로 전달합니다.

• 다음은 이전에 게시된 컨트롤러의 업데이트된 버전입니다.

@Controller
public class ReactAppController {

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

}

이미 경로를 사용하고 있다면 다음으로 이동하는 것이 어떻습니까?HashRouter대신에BrowserRouter.

내 컨트롤러 폴더 아래:

import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class UiController {
    /*
      /xyz and /abc are the urls which is used in react routing
     */
    @RequestMapping(value = { "/", "/xyz","/abc","/error"  })
    public String getIndex(HttpServletRequest inRequest) {
        return "/index.html";
    }
}

//Application 클래스에 ComponentScan을 추가하는 것을 잊지 마십시오.

언급URL : https://stackoverflow.com/questions/47689971/how-to-work-with-react-routers-and-spring-boot-controller