React-router: как работают вложенные маршруты?

Question

У меня есть приложение реагировать с реакцией-роутер. Я пытаюсь настроить вложенные маршруты:

"/" --> home page
"/products" --> products list (child component of home page)
"/products/new" --> new product: child component of products list

Что я пытался сделать до сих пор:

<Route path="/" component="home" >

     <Route path="products" component="products" >

           <Route path="new" component="products_new" />
     </Route>

</Route>

Теперь в браузере с домашней страницы по умолчанию, когда я нажимаю "/products", компонент продуктов загружен, и я вижу свой список продуктов. Но когда я ударил "products/new" Ничего не произошло. Я получаю пустую страницу. Если я ударил "/new" (не вложенный) это работает (страница product_new загружается внутри родительского элемента). (этот "/products/new" не работает; этот "/new" работает)

Я посмотрел на этот вопрос на GitHub Проблема с вложенными маршрутами # 687. Решение говорит:

Я обнаружил свою проблему. Родительские маршруты всегда называются. Это намерение. Но дочерние компоненты должны быть повторены <Router.RouteHandler/> быть оказанным.

Я не могу понять это решение. Что это значит: "но дочерние компоненты должны быть повторены <Router.RouteHandler/> быть оказанным "

EDIT1: вот мои компоненты (маршрутизаторы и представления):

1. Моя иерархия маршрутизации:

               <Route path="/" >    
                       <IndexRoute component={Home}/>
                       <Route path="products">
                           <IndexRoute component={Products} />
                           <Route path="new" component={Products_New} />
                       </Route>
                   </Route>                        
               </Router>
   

2. Мой домашний компонент:

        <div className="col-lg-12">
           <h1>Home page</h1>
           <hr />
           {this.props.children}
       </div>
   

3. Мои продукты компоненты:

       <div>
           <div className="col-lg-12">
               <h1>Products</h1>
           </div>
           <hr />
           {this.props.children}
       </div>
   

4. Мой продукт-новый компонент:

Answer 1

Вы смотрели на IndexRoutes? Если нет, прочитайте об этом в официальной документации. Ваша проблема здесь в том, что когда вы посещаете /products/newReact-router пытается отобразить все компоненты, которые находятся выше вашего products_new маршрут.

Это поведение предназначено, если вы хотите визуализировать дочерний компонент внутри родительского компонента. Позвольте мне продемонстрировать несколько примеров:

Пример 1

Рассмотрим следующее home компонент, который имеет верхний и нижний колонтитулы, который включен на всех страницах.

<Header />
<div>{this.props.children}</div>
</Footer />

со следующей маршрутизацией:

<Route path="/" component={home} >
  <Route path="products" component={products} />
</Route>

• Посещение / будет отображать страницу только с <Header />, пустой <div> а также <Footer />,
• Посещение /products будет отображать страницу, как указано выше, но <div> теперь будет содержать ваши <Products /> составная часть.

Так как в вашем коде вы (возможно) не рендерите {this.props.children} ты всегда получишь родителя <Home /> компонент, независимо от того, если вы посетили / или же /products,

Это поведение полезно для вещей, которые обертывают основные элементы вашего сайта, такие как меню, баннеры, боковые панели и т. Д.

---

Пример 2

Теперь снова рассмотрим то же самое home составная часть:

<Header />
<div>{this.props.children}</div>
</Footer />

но с этой маршрутизацией:

<Route path="/">
  <IndexRoute component={home}
  <Route path="products" component={products} />
</Route>

• Посещение / будет отображать страницу только с <Header />, пустой <div> а также <Footer />,
• Посещение /products сейчас бы сделать ваш <Products /> компонент сам по себе, без обертывания внутри родительского <Home /> составная часть.

---

TL; DR

Если вместо этого вы хотите, чтобы каждый маршрут отображал отдельные компоненты, а не все в дереве этого маршрута, вам следует использовать следующую маршрутизацию:

const browserHistory = useRouterHistory(createHistory)({basename: '/'});

ReactDOM.render(
  <Route history={browserHistory}>
    <Route path="/">
      <IndexRoute component={home} />
      <Route path="products" >
        <IndexRoute component={products} />
        <Route path="new" component={products_new} />
      </Route>
    </Route>
  </Router>,
  document.getElementById('content')
);