React-router: Stateless Component Route

Created on 23 Apr 2016  路  1Comment  路  Source: ReactTraining/react-router

I been using latest react 15.0 and react-router 2.0.1

Per module route

import React from 'react';
import Route from 'react-router/lib/Route';
import Dashboard from '../containers/Dashboard';

export const DashboardRoute = () => 
    <Route path="/dashboard" component={ Dashboard }/>

Register to global router

import { loginRoutes } from './login/routes';
import { formRoutes } from './forms/routes';
import { DashboardRoute }  from './dashboard/routes';

export const routes = (history) => {
    return (
        <Router history={ history }>
            <Route path="/" component={ App }>
                { formRoutes() }
                <DashboardRoute/>
            </Route>
            { loginRoutes() }
        </Router>
    )
}

it says
bundle.js:2668 Warning: [react-router] Location "/dashboard" did not match any routes

but this works

import { loginRoutes } from './login/routes';
import { formRoutes } from './forms/routes';
import { DashboardRoute }  from './dashboard/routes';

export const routes = (history) => {
    return (
        <Router history={ history }>
            <Route path="/" component={ App }>
                { formRoutes() }
                { DashboardRoute() }
            </Route>
            { loginRoutes() }
        </Router>
    )
}

Is stateless route component works on react-router?

>All comments

You shouldn't put non-<Route> elements in your router tree.

Was this page helpful?
0 / 5 - 0 ratings