RE: Using existing React app with Liferay 7.2 - Routing issue

2020-06-15T22:46:32Z

Sorry, didn't see this sooner...

You can't really rely on anything that is address-bar related. Unlike most react apps where they own the address bar, as portlets they can never own the address bar as that is owned and operated by the portal.

RE: Using existing React app with Liferay 7.2 - Routing issue

2020-06-15T22:00:02Z

I believe I figured out the solution. Instead of the following line:
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

it should be
import { HashRouter as Router, Switch, Route } from 'react-router-dom';

It must be HashRouter for Portlets

Chris

Using existing React app with Liferay 7.2 - Routing issue

2020-06-15T17:57:48Z

I apologize if this has been asked, but I didn't see anything that was a direct answer to this. I've migrated a simple React application to Liferay using https://help.liferay.com/hc/en-us/articles/360035467712-Adapting-Existing-Apps-to-Run-on-Liferay-DXP.

My question: Is there a solution that works for consistent routing? I've tried both Reach router and React router. Sometimes, it works as expected, but then I'll try it and I get "The requested resource could not be found." when I click on one of my navigation links.I saw a couple of examples and a Youtube video where someone has routing that was working, but I am wondering what I am doing wrong.
My routing is simple:
app.js
import React from 'react';import Home from './Home';import Second from './Second';import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';import Nav from './Nav';
function App() {  return (    <>      <Router>      <Nav />        <Switch>          <Route exact path='/'>            <Home />          </Route>          <Route exact path='/second'>            <Second />          </Route>        </Switch>      </Router>    </>  );}
and Nav.js:import React from 'react';import {  Link } from 'react-router-dom';
export default function Nav(){    return(        <nav>            <Link to="/">Home</Link>{ ' | ' }            <Link to="/second">Second</Link>        </nav>    );}Any help would be appreciated. Thank you
Chris