Geek Answers Handbook

Hierarchy in Real Router

I am studying the reaction, and I am trying to create some routes, I have this code in my entry point:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router';

import App from './app/Components/AppComponent';
import SupervisoryReport from './app/Components/SupervisoryReportComponent';
import Topmenu from './app/Components/TopmenuComponent';

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={SupervisoryReport} />
            <Route path="test">
            </Route>
        </Route>
    </Router>,
    document.getElementById('app')
);

It works great. Now I need when I go to /test, to still display the Supervisory report and add some things. But, apparently, it only displays what is inside the current route, not the upper routes.

Any idea how to do this?

EDIT

Explain in more detail what I want to do:

Suppose that I have a route /supervisory-reportthat contains 20 pages inside: /supervisory-report/page-1, /supervisory-report/page-2etc.

each of these pages must have a component.

then I have other routes, for example '/ test'.

Supervisory Report ?

+4
2

, SupervisoryReport App, . , :

return (
    <div>
        <SupervisoryReport>
            {this.props.children} // if you want the component to be inside
        </SupervisoryReport>
        {this.props.children} // if you want the component to be after
    </div>);

:

<Route path="/" component={App}>
    <Route path="test" component={TestComponent} />
</Route>

, SupervisoryReport , . , - :

<Route path="/" component={App}>
    <Route path="other" component={OtherComponent}/>
    <Route path="*" component={SupervisoryReport}>
        <Route path="test" component={TestComponent} />
    </Route>
</Route>

, * , - , .

: , - :

<Route path="/" component={App}>
    <Route path="test" component={TestComponent}/>
    <Route path="supervisory-report" component={SupervisoryReport}>
        <Route path="page-1" component={PageOneComponent}/>
        <!-- etc -->
    </Route>
</Route>
+4

, , "test".

 <Route path="/" component={App}>
            <IndexRoute component={SupervisoryReport} />
            <Route path="test" component={TestComponent}/>

        </Route>
+1

More articles:


All Articles