我如何正确地使用IndexRoute在React路由器

How do I correctly use IndexRoute in React Router?

本文关键字：IndexRoute React 路由器 正确地      更新时间：2023-09-26

我正在使用React为一个小的web应用程序。它有一个基本的5页网站布局。(Home|About|Contact|Press|Shows)所以我想使用一个只显示菜单、页眉和页脚的应用模板，而{props.children}将是React Router的路由组件。为了实现这一点，我使用了以下代码。假设所有的导入都在那里…

这是我的路由器代码:

export default (props) => {
    return (
        <Router history={ hashHistory }>
            <Route path="/" component={ Template }>
                <IndexRoute component={ Home }></IndexRoute>
                <Route path="about"   component={ About }></Route>
                <Route path="music"   component={ Music }></Route>
                <Route path="store"   component={ Store }></Route>
                <Route path="shows"   component={ Shows }></Route>
                <Route path="contact" component={ Contact }></Route>
            </Route>
        </Router>
    );
}

现在是我的模板:

export default ( props ) => {
    return (
        <div className="container">
            <Header />
            <Menu />
            { props.children }
            <Footer />
        </div>
    );
}

我知道有些事情是错误的，b/c没有CSS魔法，a:活动总是HOME和任何其他活动页面。也就是说，如果我点击About，那么Home和About都是活动的。我如何正确使用索引路由，或者我应该在这个简单的应用程序中使用索引路由?如果没有，那么我还能如何使用我拥有的模板，并以不同的方式将页面作为组件传递进来呢?

更新:这是我的Menu.js文件…

const Menu = () => {
    return (
        <div>
          <nav>
            <Link activeClassName="nav-active" to="/">Home</Link>
            <Link activeClassName="nav-active" to="about">About</Link>
            <Link activeClassName="nav-active" to="music">Music</Link>
            <Link activeClassName="nav-active" to="shows">Shows</Link>
            <Link activeClassName="nav-active" to="store">Store</Link>
            <Link activeClassName="nav-active" to="contact">Contact</Link>
          </nav>
          <hr className="line" />
        </div>
    );
}
export default Menu;

对于索引路由，您应该使用IndexLink比较，否则'Home'将始终处于活动状态

import {Link,IndexLink} from 'react-router';
<IndexLink activeClassName="nav-active" to="/">Home</IndexLink>
<Link activeClassName="nav-active" to="about">About</Link>
<Link activeClassName="nav-active" to="music">Music</Link>
 ...
相关文章：