Создание второго уровня СЧА с ReactRouter

Question

Есть шаблон, как это:

Try to create tabs in component using router, but getting errorr 


My index.js 

import React from 'react' 
import { 
    render 
} from 'react-dom' 
import { 
    Provider as ReduxProvider 
} from 'react-redux' 
// import { Provider as IntlProvider } from './components/Intl' 
import { 
    Router, 
    Route, 
    IndexRoute, 
    Link, 
    Redirect, 
    browserHistory 
} from 'react-router' 


import App from './containers/App' 
import Home from './containers/Home/Home' 
import Course from './containers/Course/Course' 
import Feedback from './containers/Feedback/Feedback' 
import Revenue from './containers/Revenue/Revenue' 
import Income from './containers/Revenue/Income' 
import IncomeOver from './containers/Revenue/IncomeOver' 

render((
    <ReduxProvider > 
     <IntlProvider locale={'en'}> 
      <Router history={browserHistory}> 
      <Route path="/" component={App}> 
       <IndexRoute component={Home}/> 
       <Route path="Course" component={Course}/> 
       <Route path="Feedback" component={Feedback}/> 
       <Route path="/Revenue" component={Revenue}> 
        <Route path="Income" component={Income}/> 
        <Route path="IncomeOver" component={IncomeOver}/> 

       </Route> 
      </Route> 

      </Router> 
     </IntlProvider> 
    </ReduxProvider> 
), document.getElementById('mount')) 

меню работает только для левой панели.

Попробуйте сделать то же самое для вкладок

import React from 'react' 
import { Link, browserHistory } from 'react-router' 

function Revenue ({ children }) { 
    return (
    <div> 
    <div> 
       <ul> 
        <li><Link to="/Income" activeClassName="activelink">1111 </Link></li> 
        <li><Link to="/IncomeOver" activeClassName="activelink">2222 </Link></li> 

       </ul> 
      </div> 
     <div className="cont-position">{children}</div> 
    </div> 

) 
} 
export default Revenue 

Но это не работает для меня. Как решить эту проблему? Мне нужно что-то вроде вкладок. Открыть страницу и коммутация там компонента, нажав ссылки

Answer 1

Я думаю, что вы можете просто зарегистрировать их на одном уровне, как этот

<Route path="/" component={App}> 
    <IndexRoute component={Home}/> 
    <Route path="Course" component={Course}/> 
    <Route path="Feedback" component={Feedback}/> 
    <Route path="/Revenue" component={Revenue}/> 
    <Route path="/Revenue/Income" component={Income}/> 
    <Route path="/Revenue/IncomeOver" component={IncomeOver}/> 
</Route> 

и использовать их позже, как это

<Link to="/Revenue/Income" activeClassName="activelink">1111 </Link> 

Answer 2

Не знаю, почему это не работает, вам, возможно, потребуется предоставить более подробную информацию, но попробуйте это:

в этих двух строках:

  <Route path="Course" component={Course}/> 
      <Route path="Feedback" component={Feedback}/> 

надстройку/в путь, как, что:

  <Route path="/Course" component={Course}/> 
      <Route path="/Feedback" component={Feedback}/> 

удалить это:

   <Route path="/Revenue" component={Revenue}> 
       <Route path="Income" component={Income}/> 
       <Route path="IncomeOver" component={IncomeOver}/> 

      </Route> 

заменить его:

  <Route path="/" component={Revenue}> 
      <Route path="Revenue" component={Revenue}> 
       <Route path="Income" component={Income}/> 
       <Route path="IncomeOver" component={IncomeOver}/> 

      </Route> 
      </Route>