如何在主页中嵌套 React 路由 [英] How to nest React Routes in homepage

问题描述

我正在尝试弄清楚如何在主页中正确嵌套路由.这是我的路由器:

var appRouter = (<路由器历史={ hashHistory }><Route path="/" component={ Navbar }><IndexRoute 组件={主页}/><Route path="items" component={主页}><Route path=":item" component={ItemShow }/></路线><Route path="nothome" component={ NotHome }/></路线></路由器>)

同时指向 Homepage 的 IndexRoute 和 Route 似乎不是最佳的，但它给了我我正在寻找的行为.这是我的整个项目(我写这个只是为了说明这一点).

//反应var React = require("react");var ReactDOM = require("react-dom");//路由器var ReactRouter = require('react-router')var Router = ReactRouter.Routervar Route = ReactRouter.Routevar IndexRoute = ReactRouter.IndexRoutevar hashHistory = ReactRouter.hashHistoryvar Link = ReactRouter.Linkvar 项目 = [1, 2]var Navbar = React.createClass({使成为(){返回(<div><Link to="/"><h1>导航栏</h1></Link>{this.props.children}

)}})var Homepage = React.createClass({使成为(){返回(<div><h2>这是主页</h2><项目列表/><Link to="/nothome">另一个页面</Link>{this.props.children}

)}})var ItemList = React.createClass({使成为(){返回(<ul>{items.map( item => {return })})}})var Item = React.createClass({句柄点击(){hashHistory.push("items/" + this.props.id)},使成为(){返回(<li onClick={this.handleClick}>项目{this.props.id}</li>)}})var ItemShow = React.createClass({使成为(){返回(<div>您点击了项目 {this.props.params.item}

)}})var NotHome = React.createClass({使成为(){返回(<h2>这不是主页</h2>)}})var appRouter = (<路由器历史={ hashHistory }><Route path="/" component={ Navbar }><IndexRoute 组件={主页}/><Route path="items" component={主页}><Route path=":item" component={ItemShow }/></路线><Route path="nothome" component={ NotHome }/></路线></路由器>)document.addEventListener("DOMContentLoaded", ()=>{ReactDOM.render(appRouter, document.getElementById("root"))})

另一种选择是在我的 ItemShow 组件顶部放置一个 Homepage 组件，而不是嵌套路由，但这似乎同样糟糕，甚至更糟.

似乎必须有更好的方法来获得这种行为.这是什么?

解决方案

找你的代码，看来你真的不需要这个items"路由，因为/"和/items"都渲染相同的组件().

因此，如果您想避免有两个Homepage"声明，您可以重定向您的用户到items"，无论何时他们转到/".你可以使用 <IndexRedirect> 或 或 onEnter 钩子.

关于钩子的更多信息:

https://github.com/reactjs/react-router/blob/v2.5.2/docs/guides/IndexRoutes.md#index-redirects

如果您真的希望能够访问指向相同组件的那两个路由，也许您不必更改任何内容.但是，在你的情况下，我会有一个主页"(即使有一些虚拟信息)和一个项目主页"，它会避免主页"重复.

顺便说一句，作为提示，我会将您的 重命名为"或类似的名称，因为最好将了解您的代码！

I'm trying to figure out how to properly nest routes inside the homepage. Here's my Router:

var appRouter = (
  <Router history={ hashHistory }>
    <Route path="/" component={ Navbar }>
      <IndexRoute component={ Homepage }/>
      <Route path="items" component={ Homepage }>
        <Route path=":item" component={ ItemShow }/>
      </Route>
      <Route path="nothome" component={ NotHome }/>
    </Route>
  </Router>
)

Having an IndexRoute and Route that both point to Homepage doesn't seem optimal, but it gives me the behavior I'm looking for. Here's my whole project (I wrote this just to illustrate this point).

//React
var React = require("react");
var ReactDOM = require("react-dom");
//Router
var ReactRouter = require('react-router')
var Router = ReactRouter.Router
var Route = ReactRouter.Route
var IndexRoute = ReactRouter.IndexRoute
var hashHistory = ReactRouter.hashHistory
var Link = ReactRouter.Link

var items = [1, 2]

var Navbar = React.createClass({
  render(){
    return(
      <div>
        <Link to="/"><h1>Navbar</h1></Link>
        {this.props.children}
      </div>
    )
  }
})

var Homepage = React.createClass({
  render(){
    return(
      <div>
        <h2>This is the homepage</h2>
        <ItemList/>
        <Link to="/nothome">Another page</Link>
        {this.props.children}
      </div>
    )
  }
})

var ItemList = React.createClass({
  render(){
    return(
      <ul>
        {items.map( item => {
          return <Item key={item} id={item}></Item>
        })}
      </ul>
    )
  }
})

var Item = React.createClass({
  handleClick(){
    hashHistory.push("items/" + this.props.id)
  },
  render(){
    return(
      <li onClick={this.handleClick}>Item {this.props.id}</li>
    )
  }
})

var ItemShow = React.createClass({
  render(){
    return(
      <div>
        You clicked on item {this.props.params.item}
      </div>
    )
  }
})

var NotHome = React.createClass({
  render(){
    return(
      <h2>This is not the homepage</h2>
    )
  }
})

var appRouter = (
  <Router history={ hashHistory }>
    <Route path="/" component={ Navbar }>
      <IndexRoute component={ Homepage }/>
      <Route path="items" component={ Homepage }>
        <Route path=":item" component={ ItemShow }/>
      </Route>
      <Route path="nothome" component={ NotHome }/>
    </Route>
  </Router>
)

document.addEventListener("DOMContentLoaded", ()=>{
  ReactDOM.render(appRouter, document.getElementById("root"))
})

Another option would be to put a Homepage component at the top of my ItemShow component and not nest the routes, but that seems just as bad if not worse.

It seems like there must be a preferable way to get this behavior. What is it?

解决方案

Looking for your code, it seems that you don't really need to have this "items" route, since both "/" and "/items" render the same component (<Homepage>).

So, if you want to avoid having two "Homepage" declaration, you can redirect your user to "items", whenever they go to "/". You can do that by using <IndexRedirect> or <Redirect> or onEnter hook.

More information about the hook:

https://github.com/reactjs/react-router/blob/v2.5.2/docs/guides/IndexRoutes.md#index-redirects

If you really want to be able to access those two routes pointing to the same component, maybe you don't have to change anything. But, in your case, I would have a "Homepage" (even with some dummy info) and a "Items Homepage", and it would avoid the "Homepage" repetition.

BTW, just as a tip, I would rename your <NavBar> to "<App>" or something like that, since it would be better to understand your code!

这篇关于如何在主页中嵌套 React 路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！