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>

Answer 3

尝试使用“精确”

<Route exact path='/Revenue' component={Revenue}/>
<Route exact path='/Revenue/Income' component={Income}/>

使用ReactRouter创建二级导航

3 个答案: