React Router conflicts with Spring Boot routing

Question

I'm creating Spring Boot app using React on frontend side. I can open the page in a browser, but on backend side appears error:

RequestRejectedException: The request was rejected because the URL contained a potentially malicious String "//"

So I have a simple java-view controller:

@Controller
public class ViewController {
    @RequestMapping("/")
    public String index() {
        return "index";
    }
}

It returns html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8"/>
    <title>Hello demo</title>
<link href="/build/react_app.css" rel="stylesheet"></head>
<body>
<div id="react"></div>
<script src="/build/js/main.min.js"></script><script src="/build/js/react_app.min.js"></script></body>
</html>

So in react app I connected react-router and here is my index.js:

const middleware = [thunk, createLogger()];
let container = document.getElementById('react');

const store = createStore(
    reducer,
    compose(applyMiddleware(...middleware))
);

ReactDOM.render(
    <Provider store={store}>
        <Router history={hashHistory}>
            <Switch>
                <Route exact path="/" component={MainPage}/>
                <Route exact path="/login" component={LoginPage}/>
                <Route exact path="/registration" component={RegistryPage}/>
                <Route path="*" component={NotFound}/>
            </Switch>
        </Router>
    </Provider>,
    container
);

export default store;

So basically I can access main page, it renders ok. I can switch between routes, but in the same time on backend I see error. I debugged and realized why it happens. url of main page is

http://localhost:8080/#/

If I use url http://localhost:8080/# it's ok, and no exceptions. How can I fix this? If I remove one of these slashes doesn't work properly

I think you should use `@RequestMapping("/**")` otherwise you would get a 404 if you are are on a route and you hit F5 to refresh the page. Maybe it will also resolve your problem — Olivier Boissé, Mar 22 '21 at 08:34
@OlivierBoissé unfortunatelly it didnt help. if I use /**, then crashes react app and in console appears error: Uncaught SyntaxError: Unexpected token '<' — Sam Fisher, Mar 22 '21 at 09:29
maybe because you react app is not compiled correctly. Normally jsx should transform the `<` into react element — Olivier Boissé, Mar 22 '21 at 10:35
@OlivierBoissé I changed a little bit my webpack config and babel config and it didnt fix ' — Sam Fisher, Mar 24 '21 at 15:01
@OlivierBoissé a mean answer to question. I will choose it as answer — Sam Fisher, Mar 24 '21 at 15:41

score 3 · Accepted Answer · answered Mar 24 '21 at 16:54

3

As you are building a single page app, you should use @RequestMapping("/**") in the backend otherwise you will get a 404 if you try to reach a different page than the homepage.

answered Mar 24 '21 at 16:54

Olivier Boissé

15,834
6
38
56

does not work for me. Can you please help https://stackoverflow.com/questions/75429187/react-route-v6-does-not-work-in-sprint-boot-app-whitelabel-error-404/75429245#75429245 – ksernow Feb 12 '23 at 18:52

React Router conflicts with Spring Boot routing

1 Answers1

Linked