Reactjs 使用ReactRouter创建二级导航

我有这样一个模板：

我试图使用路由器在组件中创建选项卡，但出现错误

我的

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'))

从“React”导入React
进口{
提供
}从“反应dom”
进口{
提供程序作为ReduxProvider
}来自“react redux”
//从“./components/Intl”导入{Provider as IntlProvider}
进口{
路由器，
路线,，
IndexRoute，
链接
重新使用
浏览历史
}从“反应路由器”
从“./containers/App”导入应用程序
从“./containers/Home/Home”导入主页
从“./containers/Course/Course”导入课程
从“./containers/Feedback/Feedback”导入反馈
来自“./集装箱/收入/收入”的进口收入
来自“./集装箱/收入/收入”的进口收入
从“/containers/Revenue/IncomeOver”导入收入
渲染((
)，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

从“React”导入React
从“react router”导入{Link，browserHistory}
函数收入（{children}）{
返回(

1111
2222

{儿童}
)
}
出口违约收入

---

但这对我不起作用。如何解决这个问题？我需要标签之类的东西。打开页面，然后单击链接切换组件。不确定为什么它不工作，您可能需要提供更多详细信息，但请尝试以下操作：

在这两行中：

            <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>

---

我想您可以像这样在一个级别上注册它们

<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>

以后像这样使用它们

<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>

1111

尝试使用“精确”