Javascript 了解如何使用React和React router创建多个页面

非常新的反应，尝试在这个过程中通过多个教程

我相信我遗漏了React的一个核心概念，并且我的结构设置不正确。我想做的是在主页（主布局）的顶部有一个导航栏。它将在该页面中有一个链接，用于转到辅助页面以显示用户信息（用户布局）。该用户_布局页面也将有一个导航栏，但它将与主页不同

因此，我已将路由设置为仅包含用户页面的一条额外路由： 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);
});

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

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

document.addEventListener（'DOMContentLoaded'，函数（）{
const app=document.getElementById（'app'）；
ReactDOM.render(
,
应用程序）；
});

因此，当应用程序加载时，它将加载Main_Layout.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);
});

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

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

从“React”导入React；
从“/components/Header”导入标题
导出默认类Main_布局扩展React.Component{
构造函数（）{
超级（）；
此.state={
“标题”：“转到用户页！”，
}
}
render（）{
返回(
)
}
}

这是我的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>
    )
  }
}

从“React”导入React；
从“react bootstrap”导入{按钮、导航、导航栏、导航下拉菜单、菜单项、导航项}；
从“反应路由器”导入{Route，RouteHandler，Link}；
从“react router bootstrap”导入{LinkContainer}；
导出默认类标头扩展React.Component{
render（）{
返回(
{this.props.title}
)
}
}

最后是显示用户信息的我的页面：user\u Layout.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);
});

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

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

从“React”导入React；
从“/components/Footer”导入页脚
从“/components/Header”导入标题
导出默认类用户\u布局扩展React.Component{
render（）{
log（“进入用户页面”）；
var title=“您在用户页面！”；
返回(
)
} 
}

我想我有几个问题：

当我单击“转到您的用户页面”时，我在URL栏中看到路由更改为/#/user，但我在user_布局中的代码从未触发（console.log不会触发）

如果我要覆盖现有的标题，我是否可以在User_Layout中重新声明标题组件？更改导航栏元素的最佳方式是什么

将路径从“user”更改为“/user”

应该是

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

---

如果不使用父组件主布局作为子组件用户布局的框架，而使用不同的标题，则应保持这两条路由彼此平行。 e、 g

ReactDOM.render(
,
应用程序）；
});

此外，如果您想要父子关系，您可以通过从主组件连接一个函数来将新的道具传递到标头组件，该函数处理路由更改时传递到标头的所有道具

react中缺少的关键概念是不在主_布局中使用this.props.children来渲染其中的子路由。 您的主_布局应该如下所示

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

}

从“React”导入React；
从“/components/Header”导入标题
导出默认类Main_布局扩展React.Component{
构造函数（）{
超级（）；
此.state={
“标题”：“转到用户页！”，
}
}
render（）{
返回(
{this.props.children}
)
}
}

只有在使用this.props.children之后，才能渲染嵌套管线中的组件