Question
How to add a redirect or 404 to a setup similar to the SPA WKND tutorial?
I have routing and navigation setup similar to how the WKND SPA tutorial has it:
https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/navigation-routing.html?lang=en
And each of my components are rendered by <Route>
However, I'm unable to add a <Swtich> that redirects or renders a 404 page. This is what I tried that just always renders the 404 page:
document.addEventListener('DOMContentLoaded', () => {
ModelManager.initialize().then((pageModel) => {
const history = createBrowserHistory();
//Create the Redux store for the app
const store = createStore(
rootReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
);
render(
<Router history={history}>
<Provider store={store}>
<Switch>
<App
history={history}
cqChildren={pageModel[Constants.CHILDREN_PROP]}
cqItems={pageModel[Constants.ITEMS_PROP]}
cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
cqPath={pageModel[Constants.PATH_PROP]}
locationPathname={window.location.pathname}
/>
<Route component={NotFound} />
</Switch>
</Provider>
</Router>,
document.getElementById('spa-root')
);
});
});
const NotFound = () => (
<div>
<h1>404 - Not Found!</h1>
Go Home
</div>
);