[英]Understanding how to have multiple pages with React and react-router
Very new to react, trying to go through multiple tutorials in this process. 非常新的响应,尝试在此过程中遍历多个教程。
I believe I am missing one of the core concepts of React and am setting up my structure incorrectly. 我相信我错过了React的核心概念之一,并错误地设置了我的结构。 What I am trying to do is have a home page (Main_Layout) with a navigational bar at the top.
我想做的是有一个主页(Main_Layout),顶部带有导航栏。 It will have a link in that page to go to a secondary page to display user information (User_Layout).
该页面上将具有一个链接,可转到第二页以显示用户信息(User_Layout)。 That User_Layout page will also have a navigational bar, but it will be a different one than the home pages.
该User_Layout页面还将具有一个导航栏,但是它将与主页不同。
So I have set my routing to contain just a single extra route for the user page: client.js 因此,我将路由设置为仅包含用户页面的一条额外路由: 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);
});
So when the app loads it will load Main_Layout.js 因此,当应用加载时,它将加载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>
)
}
}
here is my Header.js component which just has a link to the /user route: 这是我的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>
)
}
}
and finally my page to display user information : User_Layout.js 最后是显示用户信息的页面: 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>
)
}
}
I guess I have a few problems: 我想我有几个问题:
When I click "Go to your user page" I see the route change in the URL bar to /#/user, but my code in User_Layout never fires (the console.log doesnt trigger) 当我单击“转到您的用户页面”时,我在URL栏中看到到/#/ user的路由更改,但是User_Layout中的代码从未触发(console.log不会触发)
If I was to override the existing header, is it right for me to re declare the header component in User_Layout? 如果要覆盖现有的标头,是否应该在User_Layout中重新声明标头组件? What is the best way to change a navbar element?
更改导航栏元素的最佳方法是什么?
you should keep both of these routes parallel to each other if you are not using the parent component Main_layout as a frame to your child component User_Layout as you are using different headers. 如果您不使用父组件Main_layout作为子组件User_Layout的框架,而您正在使用不同的标头,则应使这两个路由相互平行。 eg
例如
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Main_Layout}/>
<Route path="user" component={User_Layout}/>
</Router>,
app);
});
also if you want the parent child relation you can pass new props to the header component by wiring up a function from the main component which handles all the props to pass to the header when the route changes. 同样,如果您希望父子关系,则可以通过从主组件连接一个函数来将新的props传递给标头组件,该函数处理路由更改时传递给header的所有props。
The key concept that you are missing in react is not using this.props.children inside the main_layout to be able to render child routes inside it. 您在react中缺少的关键概念是不使用main_layout中的this.props.children来呈现其内部的子路由。 Your main_layout should look like
您的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>
)
}
}
only after using this.props.children you will be able to render components in the nested routes. 只有在使用this.props.children之后,您才能在嵌套路线中渲染组件。
Change the path from "user" to "/user". 将路径从“用户”更改为“ /用户”。
<Route path="user" component={User_Layout}></Route>
should be 应该
<Route path="/user" component={User_Layout}></Route>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.