在反应中使用 Spring Boot & BrowserRouter 时出现 Whitelabel 错误页面

Question

I do have a react-application using BrowserRouter for routing between pages. I also have a Java Backend with Spring Boot.

When I start the backend and frontend seperataly with an applicationRunner and npm start the browserrouter works perfectly. For example http://localhost:3000/home works fine. And also localhost:8080/api/collection/{id} works fine with this code

Java-backend:

@RestController
@RequestMapping(value = "/api", produces = MediaType.APPLICATION_JSON_VALUE)
public class ApiController {
    @Autowired
    private BeregningstjenestePoller poller;

    @GetMapping("/collection/{id}")
    public CollectionV2 withId(@PathVariable String id) {
        return poller.getCollectionWithId(id);
    }

React-frontend:

<BrowserRouter>
      <Route exact path={'/'}>
        <StartPage title={'Hello'} />
      </Route>
      <Route exact path={'/home'}>
        <HomePage />
      </Route>
    </BrowserRouter>

But when I try to start the servers together with java -jar./bapplication-main/target/beregning-oversikt-main-0-SNAPSHOT.jar the trouble starts.

The application is now running on localhost:8080, so the starting page works, but localhost:8080/home doesnt work anymore, but localhost:8080/api/collection/{id} still works.

My guess is some trouble with Spring Boot and React routing together, but I cant find an answer

Answer 1

Might the Route "/" is defined in both reactjs and spring boot.

So remove index method with "/" in spring boot IndexController, below method need to be removed.. it will work with React home page.

@Controller
public class IndexController {
    @GetMapping("/")
    public String index(Model model) {

        return "index";
    }
}