Getting started with Meteor, React, and URL routing is easy. We've found two routers that work great in the React+Meteor environment: React Router and Flow Router.
Flow Router is a Meteor-specific router which works for a variety of different view layers. Getting started with Flow Router and react is super easy. Check out the Flow Router docs.
meteor add meteorhacks:flow-router
FlowRouter.route('/blog/:postId', {
action(params) {
const containerElement = document.getElementById("app-container");
React.render(<AppBody postId={params.postId} />, containerElement);
}
});
If you need complex layout options, there is also a companion package called react-layout.
This is a popular Router designed specifically for React, which specializes in rendering nested component trees. Check out the React Router docs.
See the directions on the Client NPM packages with Browserify page.
Here is some code taken from the React Todos example, which demonstrates how to define several different kinds of routes:
const {
Route,
NotFoundRoute,
DefaultRoute
} = ReactRouter;
const routes = (
<Route name="root" handler={AppBody} path="/">
<Route name="todoList" path="/lists/:listId" handler={TodoListPage} />
<Route name="join" path="/join" handler={AuthJoinPage} />
<Route name="signin" path="/signin" handler={AuthSignInPage} />
<DefaultRoute handler={AppLoading} />
<NotFoundRoute handler={AppNotFound} />
</Route>
)
const router = ReactRouter.create({
routes: routes,
location: ReactRouter.HistoryLocation
});
Meteor.startup(function () {
router.run(function (Handler, state) {
React.render(<Handler/>, document.getElementById("app-container"));
});
});