javascript - 了解如何使用 React 和 React-router 拥有多个页面

Question

对于 react 非常陌生，尝试在此过程中完成多个教程。

我相信我错过了 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. 如果我要覆盖现有 header ，我是否可以在 User_Layout 中重新声明 header 组件？更改导航栏元素的最佳方法是什么？

Answer 1

如果您不使用父组件 Main_layout 作为子组件 User_Layout 的框架(因为您使用不同的 header )，则应该保持这两条路由彼此平行。 例如

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

此外，如果您想要父子关系，您可以通过连接主组件中的一个函数来将新的 Prop 传递给 header 组件，该函数处理路由更改时传递给 header 的所有 Prop 。

您在 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 后，您才能在嵌套路由中渲染组件。