Понимание того, как иметь несколько страниц с React и реагирующим маршрутизатором

Question

Очень новое, чтобы реагировать, пытаясь пройти через несколько учебников в этом процессе.

Я считаю, что мне не хватает одной из основных концепций React и неправильно настроил структуру. То, что я пытаюсь сделать, - это домашняя страница (Main_Layout) с навигационной панелью вверху. Он будет иметь ссылку на этой странице, чтобы перейти на вторичную страницу для отображения информации пользователя (User_Layout). Эта страница User_Layout также будет иметь навигационную панель, но она будет отличаться от исходных страниц.

Так я установил свой маршрут, чтобы содержать только один дополнительный маршрут для страницы пользователя: client.js

document.addEventListener('DOMContentLoaded', function(){ 

const app = document.getElementById('app'); 

ReactDOM.render(
    <Router history={hashHistory}> 
     <Route path="/" component={Main_Layout}> 
      <Route path="user" component={User_Layout}></Route> 
     </Route> 
    </Router>, 
app); 
}); 

Так, когда приложение загружает его загрузит Main_Layout.js

import React from "react"; 
import Header from "./components/Header" 

export default class Main_Layout extends React.Component { 
    constructor(){ 
    super(); 
    this.state = { 
     "title" : "Go to user page!", 
    } 
    } 

    render(){ 
    return (
     <div> 
      <Header title={this.state.title}/> 
     </div> 
    ) 
    } 
} 

вот мой Header.js компонент, который только есть ссылка на маршрут/пользователя:

import React from 'react'; 
import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap'; 
import { Route, RouteHandler, Link } from 'react-router'; 
import { LinkContainer } from 'react-router-bootstrap'; 

export default class Header extends React.Component { 
    render(){ 
    return(
     <Navbar> 
      <Navbar.Header> 
       <Navbar.Brand> 
       <a href="#">Website Title</a> 
       </Navbar.Brand> 
      </Navbar.Header> 
      <Nav pullRight> 
       <LinkContainer to="/user"> 
       <NavItem eventKey={1}>{this.props.title}</NavItem> 
       </LinkContainer> 
      </Nav> 
      </Navbar> 
    ) 
    } 
} 

и, наконец, моя страница для отображения информации о пользователе: User_Layout.js

import React from "react"; 

import Footer from "./components/Footer" 
import Header from "./components/Header" 

export default class User_Layout extends React.Component { 
    render(){ 
    console.log("Made it to the user page"); 
    var title = "You are at the user page!"; 
    return (
     <div> 
      <Header title={title}/> 
     </div> 
    ) 
    } 
} 

Я думаю, у меня есть несколько проблем:

1. Когда я нажимаю «Перейти к вашему пользовательская страница «Я вижу изменение маршрута в строке URL для пользователя/# /, но мой код в User_Layout никогда не срабатывает (консоль.log не запускается)

2. Если бы я должен был переопределить существующий заголовок, правильно ли мне объявить компонент заголовка в User_Layout? Каков наилучший способ изменить элемент navbar?

Answer 1

Изменить путь от «пользователя» до «/ пользователя».

<Route path="user" component={User_Layout}></Route> 

должен быть

<Route path="/user" component={User_Layout}></Route> 

Answer 2

вы должны держать обе эти маршруты параллельно друг другу, если вы не используете родительский компонент Main_layout в виде рамки для вашего компонента User_Layout ребенка, как вы используете различные заголовки , , например.

ReactDOM.render(
    <Router history={hashHistory}> 
     <Route path="/" component={Main_Layout}/> 
     <Route path="user" component={User_Layout}/> 
    </Router>, 
app); 
}); 

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

Ключевое понятие, которое вам не хватает в реагировании, не использует this.props.children внутри main_layout, чтобы иметь возможность отображать в нем дочерние маршруты. Вашего main_layout должен выглядеть

import React from "react"; 
    import Header from "./components/Header" 

    export default class Main_Layout extends React.Component { 
     constructor(){ 
     super(); 
     this.state = { 
      "title" : "Go to user page!", 
     } 
     } 

     render(){ 
     return (
      <div> 
       <Header title={this.state.title}/> 
       {this.props.children} 
      </div> 
     ) 
     } 

} 

только после того, как с помощью this.props.children вы сможете оказать компоненты вложенных маршрутов.