了解如何使用React和react-router擁有多個頁面

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組件，僅具有/ user路由的鏈接：

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的路由更改，但是User_Layout中的代碼從未觸發（console.log不會觸發）

2. 如果要覆蓋現有的標頭，是否應該在User_Layout中重新聲明標頭組件？ 更改導航欄元素的最佳方法是什么？

Answer 1

如果您不使用父組件Main_layout作為子組件User_Layout的框架，而您正在使用不同的標頭，則應使這兩個路由相互平行。 例如

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

同樣，如果您希望父子關系，則可以通過從主組件連接一個函數來將新的props傳遞給標頭組件，該函數處理路由更改時傳遞給header的所有props。

您在react中缺少的關鍵概念是不使用main_layout中的this.props.children來呈現其內部的子路由。 您的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之后，您才能在嵌套路線中渲染組件。

Answer 2

將路徑從“用戶”更改為“ /用戶”。

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

應該

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