Spring boot controller mapping to react component

Question

I am switching routes in my react app using -

<Route path="/myBootDomain" render={props => {
    //check route path         
    const onpathA = window.location.href.indexOf('/pathA') !== -1;
    const onpathB = window.location.href.indexOf('/pathB') !== -1;

    if (onpathA){ return <PathAComponent />;}
    else if(onpathB){ return <onpathBComponent />;}
}}/>

When I run the app on localhost it works as expected, so I want my controllers to map the subdomain's to the correct route, example controller -

@CrossOrigin(maxAge = 3600)
@RestController
@RequestMapping("/pathA")
public class WebContentController {


    @RequestMapping(method = RequestMethod.GET)
    public void method(HttpServletRequest request, HttpServletResponse httpServletResponse) {

        httpServletResponse.setHeader("Location", "/myBootDomain/pathA");
        httpServletResponse.setStatus(302);

    }
}

When trying to access http://localhost:8080/myBootDomain/pathA instead of redirecting to the index file I got redirected to the same controller(infinite loop).

My index.html is under /resources/static.

Thank for any help.

Tashkhisi · Answer 1 · 2020-06-04T12:59:37.703

The way React works with route is different from something you might have worked before with server side frameworks like JSF, PrimeFaces and other simmilar frameworks.

Generally in React all routing is handled in client side(at least it should be done this way) and this approach is called single page application because you have one page in which components will be changed based on the route you have in client side and those components communicate with server and changed their content based on response they are delivered with server. Here you are handling your routing in client side with <Route> Component and in browser when path changed to /pathA, PathAComponent will be rendered and no request is sent to the server in this situation because React is controlling everything here). You should design your PathAComponent in such a way when it is rendered it call your method in the backend with Http Rest call and do something based on the response (for instance show status code of response to user). check this link for further discussion the more clear way to do something you want to do is shown bellow:

class App extends Component {
          render() {
            return (
              <Router>
                <Switch>
                  <Route path='/pathA' exact={true} component={PathAComponent}/>
                  <Route path='/pathB' exact={true} component={PathBComponent}/>
                </Switch>
              </Router>
            )
         }
}

here when path change to /pathA in client side PathAComponent will be rendered and when path changed to /pathB component PathBComponent will be rendered. no request send to server up to this point to communicate with server you should call your REST api directly in your PathAComponent and PathBComponent, generally in componentDidMount method of your components.

class PathAComponent extends Component {

      constructor(props) {
        super(props);
        this.state = {status: false, isLoading: true};
      }

      componentDidMount() {
        this.setState({isLoading: true});

        fetch('/myBootDomain/pathA')
          .then(response => this.setState({status: response.status, isLoading: false}));
      }

      render() {
        return (
              <div>
                statusCode: {status}
              </div>
            );
      }
}

score 0 · Accepted Answer · answered Jun 04 '20 at 11:48

What you want to do is to serve same index.html file that contains scripts (React app) but from different paths, ie: /myBootDomain/pathA and /myBootDomain/pathA/foo/bar. It'll make sure that when user reloads the URL he gets the same React app which then executes routing logic. See @tashkhisi answer to get more context https://stackoverflow.com/a/62193394/906265

Now it depends how the server app is set up and which paths you want to make "catch-all" but there was a similar question already Spring catch all route for index.html

Spring boot controller mapping to react component

2 Answers2