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

我想我有一些问题：

当我点击＆＃34;转到您的用户页面＆＃34;我看到URL栏中的路由更改为/＃/ user，但我在User_Layout中的代码永远不会触发（console.log不会触发）
如果我要覆盖现有的标题，我是否应该在User_Layout中重新声明标题组件？更改导航栏元素的最佳方法是什么？

Answer 1

如果您没有使用父组件Main_layout作为子组件User_Layout的框架，则应该保持这两条路径彼此平行，因为您使用的是不同的标头。 e.g。

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

如果你想要父子关系，你可以通过连接主要组件中的一个函数将新的道具传递给标题组件，该组件处理所有道具，以便在路线改变时传递给标题。

你在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

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

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

应该是

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

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

2 个答案: