Skip to content

Latest commit

 

History

History
 
 

resolve-scripts-with-router-4

README.md

Example: React-router-4

React-router-4 is a simple single page application (SPA) based on the Create ReSolve App. The application uses the react-router (v4) package to implement routing for server and client sides. This example shows how to add a router to a reSolve application and guarantee correct server-side rendering.

Refer to https://reacttraining.com/react-router/web/guides/philosophy to learn more about React Router v4.

Important note: When configuring a router instance on the server side, ensure that it is wrapped in a component in the following way:

rootComponent: (props, context) =>
    <StaticRouter location={props.url} context={{}}>
        <RootComponent />
    </StaticRouter>

The current URL generated by server-side rendering is available at props.url.

You can manually handle redirects using Helmet. See https://github.com/nfl/react-helmet for more information.

Quick Start

Run the following commands to start this app:

git clone https://github.com/reimagined/resolve
cd resolve
npm install
cd examples/resolve-scripts-with-router-4
npm install
cd ../..
npm run bootstrap
cd examples/resolve-scripts-with-router-4
npm start

Open http://localhost:3000 to view the application in a browser.

Folder Structure

​Path ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​​ ​ ​ ​ ​ ​​ ​ ​ ​ ​ Description
resolve-scripts-with-router-4/ The root directory.
​ ​ ​index.js The root react view component dependent on the selected route, based on <Switch>.
​ ​ package.json The current npm package description.
​ ​ README.md This readme file.
​ ​ resolve.client.config.js The client-side configuration file including react-router-dom/<BrowserRouter> as a router.
​ ​ resolve.server.config.js The server-side configuration file including react-router/<StaticRouter> as a router.

Supported Language Features and Polyfills

In addition to ES7 syntax features, this project also supports: