react-static-example-custom-routing v6.0.0-beta.29
React-Static - Custom Routing Example
This example includes:
- CSS imports
- Image imports
- File imports
- Custom routing
To get started, run react-static create
and use the custom-routing
template.
Automatic component routing vs custom routing
In automatic component routing, you setup your routes in getRoutes of static.config.js, where you specify the path and the appropriate component for that path:{path: 'foo', component: 'src/components/MyFoo'}
This is the easiest way to specify routes.
In custom component routing, you also setup your routes in getRoutes of the static.config.js, but you don't specify the component! {path: 'foo'}
Instead, you specify the routes in the components <Route path='/foo' component={MyFoo} \>
. It's important to note that you can use one method or the other, but not both.
Note: automatic routes will be generated even if a given route is not allowed in your custom routing logic. The consequences of a mismatch between custom and automatic routing can be important: you can create the illusion that a route is not found
on the client (react-router
not matching a given URL), while a corresponding index.html
and routeData.json
were made available on the server at build-time. Appending /routeData.json
to any given URL can help you realize if there is a unwanted mismatch: if /posts/27/
returns 404
while browsing, so should /posts/27/routeData.json
.
6 years ago
6 years ago