2

I have a project in react, it works well in the development version, but when I export it (bundle.js) and I take it to a tomcat it does not recognize the routes of the react-router-dom.

Do I need to configure something in the tomcat? I found several examples but they have not worked for me:

react routing is able to handle different url path but tomcat returns 404 not available resources

https://github.com/gildata/RAIO/issues/138

This is my index.jsx:

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { IntlProvider } from 'react-intl';
import { Provider } from 'react-redux';
import store from 'src/app/store';
import App from 'src/app/App';

render(
  <Provider store={store}>
    <IntlProvider locale="en">
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </IntlProvider>
  </Provider>,
  document.getElementById('contenedor'),
);

This is App.jsx

import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import Login from 'src/app/Login';
import Menu from 'src/app/Menu';

const logueado = localStorage.getItem('tLogueado');

const App = () => (
  <main>
    <Switch>
      <Route exact path="/login" render={() => (logueado ? (<Redirect to="/onix" />) : (<Login />))} />
      <Route exact path="/onix" render={() => (logueado ? (<Menu />) : (<Redirect to="/login" />))} />
    </Switch>
  </main>
);

export default App;

I am doing something wrong? please have me patience i am new in react.

Adrian Natividad
  • 21
  • 1
  • 2
  • What exactly is the actual error? Which url did you try to navigate to and what do you see? Do you get a 404? Are you running tomcat locally on `localhost`? Tomcat does not know about any routes defined in your front-end application. You have to configure it to respond with your application on every request below the baseUrl. From there your app will handle routing. From the point of view of tomcat there is only a single page existing, which is your react app. – trixn Feb 02 '18 at 18:43
  • If I am running a tomcat locally trying to navigate to the route: http://localhost:8080/login But it marks me the error: HTTP status 404 - / login How can I configure it to respond below the baseUrl? – Adrian Natividad Feb 02 '18 at 19:05
  • It should be configured to always respond with your app no matter if you are requesting `/login` or `/onix` or whatever because your app handles routes below `/` itself. Also you should usually provide a default route if no route matches the other ones defined. But i don't know how to do that in tomcat. Is there a particular reason you want to use tomcat? To make it work for now it's probably enough to add a default route in your react router that redirects to `/login` and then open it just with `localhost:8080/`. – trixn Feb 02 '18 at 19:13
  • I already did it, but this error marks me: Error de mapa de fuente: request failed with status 404 URL del recurso: http://localhost:8080/siag-fe/dist/bundle.js URL del mapa de fuente: validateNextState.js.map – Adrian Natividad Feb 02 '18 at 22:17
  • use Tomcat RewriteValve, see [here](https://stackoverflow.com/a/53550190/1062992) – egerardus Jun 10 '19 at 18:12

1 Answers1

1

there are two possible ways to solve this issue

  1. Use HashRouter instead of BrowserRouter

or

  1. Use basename like : <BrowserRouter basename="/calendar"/>

check this link how-to-deploy-a-react-app-to-a-subdirectory

Mohit Bhagat
  • 245
  • 5
  • 14