1

so I have a Java/Spring MVC web app, which has a @Controller with a method annotated @RequestMapping(value = "/", method = RequestMethod.GET) returning the main index.html (when localhost:8080 is typed in browser url), containing the React.js app. This is the only controller for a text/html, all the others are @RestControllers mapped to path /api... - restfull api for the React SPA. The React app has implemented the react-router-dom and the programmatic routing in the app works fine, f.e. a <Link to="/dashboard">dashboard</Link> got to the http://localhost:8080/dashboard and is not sending a GET to the server. The problem is when I manually type http://localhost:8080/dashboard in the browser url, it sends a GET request to the Spring server, whereas when a React app is served by node runtime, the react-router-dom "catches" and handles these browser requests. Can the these text/html browser requests be forced to be handled by the react router?

fooBar
  • 13
  • 3

1 Answers1

0

I assume you're using react's BrowserRouter.

When you type a url into your browser and press ENTER you're making a GET http request to the server. When navigating with react's Link elements, your browser resolves the url changes and renders the react component according to the url value without making a request.

Hope this helps

Martín Zaragoza
  • 1,717
  • 8
  • 19
  • I just don't understand, when a react app is launched with babel-node, or react-scripts start, the react router resolves the url typed in the browser + ENTER. But served from Java/Jetty I get a 404. Thanks tho – fooBar Jul 23 '18 at 17:49
  • Because BrowserRouter assumes that your server can resolve any view requests. If your first request is to /index and your server resolves the view and then you navigate to /users through a link, then the browser renders the component (assuming /users renders ). But if you enter /users in your search bar and press enter, then your server will have to resolve the /users view. If this behavior is undesirable, you can use HashRouter which resolves urls like #users. – Martín Zaragoza Jul 23 '18 at 17:52
  • babel-node also would have to resolve the view for the /users request – fooBar Jul 23 '18 at 18:01
  • When you launch your web app using Jetty and go to http://localhost:8080/ (to get index.html) are you getting 404 as well? – Martín Zaragoza Jul 23 '18 at 18:09
  • no, for localhost:8080 I get the view (react app), but for f.e. localhost:8080/users I get a 404 – fooBar Jul 23 '18 at 18:22
  • That's because you don't have any @Controller that maps /users. When using babel-node , a client side app is created for you to test and play. When deploying to a real server you should use HashRouter if your app cannot resolve any other route besides '/'. – Martín Zaragoza Jul 23 '18 at 18:25
  • I found a workarround - sending redirect for every GET request with path other than "/" or "/api/**" to "/" somehow magically works. But I'm goung to checkout the HashRouter, never tried it yet.. – fooBar Jul 23 '18 at 18:26
  • But if you do that then all GET requests to any mapping will respond with index.hml – Martín Zaragoza Jul 23 '18 at 18:31
  • I'm fixing that with @PathVariables – fooBar Jul 23 '18 at 18:44