퐁당 웹 매거진 프로젝트 제작 일지 <8>

2023.09.07 (WED)

---

1. 라우팅 처리

스프링부트와 리액트를 함꼐 쓰는 중에, 다른 페이지로 가기 위한 라우팅을 해야할 때가 왔다.

1-1. 리액트

리액트에서는 컴포넌트로 나누어 App.js에서 라우팅 처리를 한다.

function App() {

    return (
        <BrowserRouter>
            <div className="App">
                <Route path="/" exact component={Main}></Route>
                <Route path="/test" component={Test}></Route>
            </div>
        </BrowserRouter>
    );
}

1-2. 스프링부트

로컬에서는 ‘/’, ‘/test’ 모두 접속이 가능하다. 하지만 스프링부트에 연결한 서버에 접속하면, ‘/test’엔 접속이 되지 않고 404에러가 나온다.
Controller를 사용하면 이 문제가 해결된다.
일단 임시로 모든 경로를 연결해준다.

@Controller
public class WebController implements ErrorController {

    @RequestMapping({"/{path:[^\\.]*}"})
    public String redirect() {
        return "forward:/";
    }
}