react-router#IndexRoute JavaScript Examples

The following examples show how to use react-router#IndexRoute. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: reduxstagram.js    From Learning-Redux with MIT License 6 votes vote down vote up 
router = (
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={App}>
                <IndexRoute component={PhotoGrid}></IndexRoute>
                <Route path="/view/:postId" component={Single}></Route>
            </Route>
        </Router>
    </Provider>
)
Example #2
Source File: reduxstagram.js    From Learning-Redux with MIT License 6 votes vote down vote up 
/*
  Error Logging
*/

// import Raven from 'raven-js';
// import { sentry_url } from './data/config';
// if(window) {
//   Raven.config(sentry_url).install();
// }

/*
  Rendering
  This is where we hook up the Store with our actual component and the router
*/
render(
  <Provider store={store}>
    {/* Tell the Router to use our enhanced history */}
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={PhotoGrid} />
        <Route path="/view/:postId" component={Single}></Route>
      </Route>
    </Router>
  </Provider>,
  document.getElementById("root")
);
Example #3
Source File: IndexLinkContainer.spec.js    From Lambda with MIT License 5 votes vote down vote up 
describe("IndexLinkContainer", () => {
  ["Button", "NavItem", "MenuItem", "ListGroupItem"].forEach((name) => {
    describe(name, () => {
      const Component = ReactBootstrap[name];

      describe("active state", () => {
        function renderComponent(location) {
          const router = ReactTestUtils.renderIntoDocument(
            <Router history={createMemoryHistory(location)}>
              <Route
                path="/"
                component={() => (
                  <IndexLinkContainer to="/">
                    <Component>Root</Component>
                  </IndexLinkContainer>
                )}
              >
                <IndexRoute />
                <Route path="foo" />
              </Route>
            </Router>
          );

          const component = ReactTestUtils.findRenderedComponentWithType(
            router,
            Component
          );
          return ReactDOM.findDOMNode(component);
        }

        it("should be active on the index route", () => {
          expect(renderComponent("/").className).to.match(/\bactive\b/);
        });

        it("should not be active on a child route", () => {
          expect(renderComponent("/foo").className).to.not.match(/\bactive\b/);
        });
      });
    });
  });
});
Example #4
Source File: routes.js    From react-stack-grid with MIT License 5 votes vote down vote up 
routes = () => (
  <Route path="/" component={App}>
    <IndexRoute component={Home} />
    <Route path="/horizontal/" component={HorizontalFlow} />
    <Route path="/change-size/" component={ChangeSize} />
    <Route path="/real-world/" component={RealWorld} />
  </Route>
)
Example #5
Source File: routes.jsx    From Spoke with MIT License 4 votes vote down vote up 
export default function makeRoutes(requireAuth = () => {}) {
  return (
    <Route path="/" component={App}>
      <IndexRoute component={Home} />
      <Route path="admin" component={AdminDashboard} onEnter={requireAuth}>
        <IndexRoute component={() => <DashboardLoader path="/admin" />} />
        <Route path=":organizationId">
          <IndexRedirect to="campaigns" />
          <Route path="campaigns">
            <IndexRoute component={AdminCampaignList} />
            <Route path="new" component={AdminCampaignCreate} />
            <Route path=":campaignId">
              <IndexRoute component={AdminCampaignStats} />
              <Route path="edit" component={AdminCampaignEdit} />
              <Route path="review" component={AdminIncomingMessageList} />
            </Route>
          </Route>
          <Route path="people" component={AdminPersonList} />
          <Route path="labels" component={AdminLabelsList} />
          <Route path="numbers" component={AdminPhoneNumbers} />
          <Route path="settings" component={Settings} />
        </Route>
      </Route>
      <Route path="app" component={TexterDashboard} onEnter={requireAuth}>
        <IndexRoute
          components={{
            main: () => <DashboardLoader path="/app" />,
            topNav: p => (
              <TopNav title="Spoke" orgId={p.params.organizationId} />
            ),
            fullScreen: null
          }}
        />
        <Route path=":organizationId">
          <IndexRedirect to="todos" />
          <Route
            path="account/:userId"
            components={{
              main: p => (
                <UserProfile
                  userId={p.params.userId}
                  organizationId={p.params.organizationId}
                />
              ),
              topNav: p => (
                <TopNav title="Account" orgId={p.params.organizationId} />
              )
            }}
          />

          <Route
            path="suspended"
            components={{
              main: p => (
                <SuspendedTexter organizationId={p.params.organizationId} />
              ),
              topNav: p => (
                <TopNav title="Spoke" orgId={p.params.organizationId} />
              )
            }}
          />
          <Route path="todos">
            <IndexRoute
              components={{
                main: TexterTodoList,
                topNav: p => (
                  <TopNav title="Spoke" orgId={p.params.organizationId} />
                )
              }}
            />
            <Route path=":assignmentId">
              <Route
                path="overview"
                components={{
                  main: SingleAssignmentSummary,
                  topNav: p => (
                    <TopNav title="Spoke" orgId={p.params.organizationId} />
                  )
                }}
              />
              <Route
                path="text"
                components={{
                  fullScreen: props => <InitialMessageTexter {...props} />
                }}
              />
              <Route
                path="conversations"
                components={{
                  fullScreen: props => <ConversationTexter {...props} />
                }}
              />
            </Route>
          </Route>
        </Route>
      </Route>
      <Route path="login" component={Login} />
      <Route path="terms" component={Terms} />
      <Route path="reset/:resetHash" component={Home} onEnter={requireAuth} />
      <Route
        path="createOrganization"
        component={CreateOrganization}
        onEnter={requireAuth}
      />
      <Route
        path="join-campaign/:token"
        component={JoinCampaign}
        onEnter={requireAuth}
      />
      <Route path="*" component={() => <Error404 />} />
    </Route>
  );
}