רוב הדוגמאות לניתוב צד-לקוח באמצעות react-router מציגות הגדרת טבלת ניתוב שנראית כמו JSX. היתרון שזה מרגיש יותר ריאקטי אבל האמת שמדובר במסיכה בלבד: ריאקט ראוטר עצמה מתרגמת את כתיב ה JSX לטבלת ניתוב הבנויה כהיררכיה של אוביקטי JavaScript, בדיוק כמו הראוטר של אנגולר או ספריות ניתוב אחרות.

להלן דוגמא פשוטה לטבלת ניתוב בשני התחבירים לצורך השוואה ביניהם.

1. המחשה: טבלת ניתוב בכתיב JSX מתורגמת לאוביקטים

טבלת ניתוב פשוטה בכתיב JSX:

var Routes = React.createClass({
  render: function() {
    return (<Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Index} />
      <Route path="about" component={About}/>
      <Route path="users" component={Users} />
      <Route path="hello/:name" component={Hello} />
    </Route>
  </Router>)
  }
});

אותה הטבלא בכתיב JavaScript רגיל:

var Routes = React.createClass({
  render: function() {

    const plainRoutes = [
      { 
        path: '/',
        component: App,
        indexRoute: { component: Index },
        childRoutes: [
          { path: "about", component: About },
          { path: "users", component: Users },
          { path: "hello/:name", component: Hello  },
        ]
      },
    ];

    return <Router history={hashHistory} routes={plainRoutes} />
  }

באיזה תחביר נבחר? מה שנוח לכם כמובן. לכתיב הריאקטי יש יתרון קריאות ניכר, אך את תחביר האוביקטים קל יותר להרחיב באמצעות קוד.

מוזמנים לראות את הקוד בפעולה בקודפן הבא: