I use react router for routing in my create-react-app. All routes work as expected using "npm start" ("react-scripts start").
However, now I would like to deploy my application and therefore ran "npm run-scripts build" ("react-scripts build"). Afterwards I ran "serve -s build" in order to start the webserver. In this version of my web application the static routes are working but the dynamic ones don't.
An example of a static route configuration looks like this. This route works in both, the dev mode and the build mode of the react application. Example URL: "http://localhost:5000/dashboard/viewData".
{
path: "/dashboard/viewData/",
component: withAuth(CrosstabTest),
exact: false
}
The following route is dynamic and doesn't work. However, my guess is that it is not due to ":processFlowItemId" but instead due to additional URL parameters. Example URL: "http://localhost:5000/dashboard/definition/1?id=0744a761-111c-446c-9bb5-2763c5c8bb04".
{
path: "/dashboard/definition/:processFlowItemId",
component: withAuth(DefinitionContainer),
exact: false
}
When I run the example URL without "?id=0744a761-111c-446c-9bb5-2763c5c8bb04" the application loads the component but as the id parameter is missing, I get an error. But at least it's an indication for the fact that the route is working in general but has issues with the parameter. When opening the complete example URL including the id field, the component seems not to be loaded at all (meaning react-router doesn't recognize the URL as an instance of the pattern defined in the route.
As mentioned, the issue only occurs when using the build version of the app.
Edit:
Below I describe the code in more details:
I have a config with my routes:
export const mainRoutes: any = [
{
path: "/dashboard/",
component: Dashboard,
exact: false
},
]
export const dashboardRoutes: any = [
{
path: "/dashboard/viewData/",
component: withAuth(CrosstabTest),
exact: false
},
{
path: "/dashboard/definition/:processFlowItemId",
component: withAuth(DefinitionContainer),
exact: false
},
]
The main route ("mainRoute") is rendered here:
import { mainRoutes } from './routes/routes'
import { Switch, BrowserRouter, Route } from 'react-router-dom'
class App extends React.Component<any> {
public render() {
return (
<BrowserRouter>
{mainRoutes.map((route: any, i: number) => (
<Switch key={i}>
<Route key={i} path={route.path} component={route.component} exact={route.exact} />
</Switch>
))
}
</BrowserRouter>
)
}
}
export default App
In the Dashboard component ("Dashboard") I render a subroute:
import { Switch, Route } from 'react-router-dom'
import { dashboardRoutes } from '../../routes/routes'
...
dashboardRoutes.map((route: any, i: number) => (
<Switch key={i}>
< Route exact={true} key={i} path={route.path} render={(props) => {
return <route.component key={i} {...props} />
}} />
</Switch>
))
...
