Как вставить React Routes на домашнюю страницу

Question

Я пытаюсь выяснить, как правильно размещать маршруты внутри главной страницы. Вот мой маршрутизатор:

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

Имея IndexRoute и маршрут, что и точка на главную страницу не кажется оптимальным, но это дает мне поведение я ищу. Вот мой весь проект (я написал это, чтобы проиллюстрировать этот момент).

//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")) 
}) 

Другим вариантом было бы поставить Главная компонента в верхней части моего ItemShow компонента, а не гнездо маршрутов, но кажется, что так же плохо, если не хуже.

Кажется, что должен быть предпочтительный способ получить это поведение. Что это?

Answer 1

Поиск кода, похоже, вам не нужен этот маршрут «пунктов», так как «/» и «/ items» отображают один и тот же компонент (<Homepage>).

Итак, если вы хотите, чтобы избежать два «Homepage» заявления, вы можете перенаправить своего пользователя «элементы», всякий раз, когда они идут в «/». Вы можете сделать это, используя <IndexRedirect> или <Redirect> или onEnter крючок.

Более подробная информация о крючке:

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

Если вы действительно хотите, чтобы иметь возможность получить доступ к этим двум маршрутам, указывающих на компонент же, может быть, вы не должны ничего менять. Но в вашем случае у меня была бы «Домашняя страница» (даже с некоторой фиктивной информацией) и «Домашняя страница статей», и она избегала повторения «Домашняя страница».

BTW, как совет, я бы переименовал ваш <NavBar> в "<App>" или что-то в этом роде, так как было бы лучше понять ваш код!