Let's say I have the following setup:
React Application at /
A previously existing application at /path/to/application
A JPG at /assets/image.jpg
A static HTML file for use in an iFrame at /static/index.html
ReactRouter (react-router-dom) is attempting to resolve all of these scenarios - displaying the Not Found component in example 2, 3 and 4 as they are naturally not configured.
Strangely, this behaviour seems to differ per browser. Safari and Firefox Quantum resolve as expected, but Chrome does not. For example, in the iFrame example, Chrome is displaying a new instance of the entire root React app inside the iFrame, whereas Safari and Firefox are loading the static HTML file contents.
I have tried using HashRouter instead of BrowserRouter but with no luck.
Is there a way I can configure my React application to ignore specific child paths, to allow the server a chance to handle this content?
One way to allow the server to handle certain paths would be to use the <Route> component's render prop to specify a component that simply returns null for those paths. This would prevent the React Router from rendering anything for those paths and allow the server to handle them.
For example:
import { Route } from 'react-router-dom'; const Application = () => ( <div><Route path="/path/to/application" render={() => null} /> <Route path="/assets/image.jpg" render={() => null} /> <Route path="/static/index.html" render={() => null} /> </div> );This way, the React Router will not attempt to render anything for those paths and will allow the server to handle them.
Another option would be to use the <Route> component's component prop to specify a component that simply returns null for those paths. This would have the same effect as using the render prop.
For example:
import { Route } from 'react-router-dom'; const NullComponent = () => null; const Application = () => ( <div><Route path="/path/to/application" component={NullComponent} /><Route path="/assets/image.jpg" component={NullComponent} /><Route path="/static/index.html" component={NullComponent} /></div> );Either of these approaches should allow you to configure your React application to ignore certain child paths and allow the server to handle them.