ReactJS Колонтитулы

Question

Я пытаюсь создать Layout компонент, который будет оказывать на Заголовок и Footer. Так что я могу впоследствии использовать Layout как

<Layout> ... </Layout> 

Я использовал маршрутизации в Колонтитулы, очевидно. Для этого мне нужно использовать

<Router history... 
<Route path... 

Когда я делаю это один за другим (для верхнего и нижнего колонтитула: хотя я чувствую, что это неправильно) в моих layout.js. Оно работает. Верхний и нижний колонтитулы отображаются в браузере. Однако, они не работают должным образом. При обновлении нижний колонтитул исчезает, а иногда и заголовок, и нижний колонтитул. Я твердо верю, что рендеринг маршрутизатора один за другим является причиной этого сбоя, но я не могу понять правильный подход. Кроме того, я не хочу, чтобы использоваться

header.js

import React from 'react'; 
import {Link} from 'react-router' 
import {Navbar, NavItem} from 'react-materialize'; 

export default React.createClass({ 
render(){ 
return (
<div> 
<Navbar brand='logo' right> 
    <NavItem><Link to="/Home" activeClassName="active">Home</Link></NavItem> 
    <NavItem><Link to="/Sign-In" activeClassName="active">Sign In</Link></NavItem> 
    <NavItem><Link to="/Register" activeClassName="active">Register</Link></NavItem> 
</Navbar> 
{this.props.children} 
</div> 
) 
} 
}) 

footer.js

import React, {Component} from 'react'; 
import {Link} from 'react-router' 
import {Footer} from 'react-materialize'; 
import '../../resource/template.css' 


class RT_Footer extends Component{ 
    render(){ 
return (
<div> 
{this.props.children} 
    <Footer copyrights="&copy; 2015 Copyright Text" 
    moreLinks={ 
    <Link className="grey-text text-lighten-4 right" href="#!">More Links</Link> 
    } 
    links={ 
    <ul> 
     <li><Link to="/About Us" className="grey-text text-lighten-3">About Us</Link></li> 
     <li><Link to="/Terms & Conditions" className="grey-text text-lighten-3">Terms & Conditions</Link></li> 
     <li><Link to="/Help" className="grey-text text-lighten-3">Help</Link></li> 
     <li><Link to="/Contact Us" className="grey-text text-lighten-3">Contact Us</Link></li> 
    </ul> 
    } 
    className='example' 
    > 
    <h5 className="white-text">Footer Content</h5> 
    <p className="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p> 
    </Footer> 

</div> 
); 
} 
} 
export default RT_Footer; 

layout.js

import {Router, Route, browserHistory} from 'react-router' 

class Layout extends Component { 
    render(){ 
return (
    <div> 
    <span> 
    <Router history={browserHistory}> 
     <Route path="/" component={Header}> 
     <Route path="/Home" component={Home}/> 
     <Route path="/Sign-In" component={SignIn}/> 
     <Route path="/Register" component={Register}/> 
     </Route> 
    </Router> 
    </span> 
    <span> 
    <Router history={browserHistory}> 
     <Route path="/" component={RT_Footer}> 
     <Route path="/About Us" component={About}/> 
     <Route path="/Terms & Conditions" component={TC}/> 
     <Route path="/Register" component={Register}/> 
     </Route> 
    </Router> 
    </span> 
    </div> 
); 
} 
} 
export default Layout; 

Тогда я просто оказал Layout в index.js

Answer 1

Я полагаю, что вы не визуализации компонент Маршрутизатор дважды (я не проверял, но вы, вероятно, не может).

Итак, как компонент Маршрутизатор работает:

• Вы даете маршрутизатору в историю (с помощью реквизита истории), здесь вы используете browserHistory из одной и той же библиотеки, которым в порядке.
• Затем вы определяете все существующие маршруты для своего приложения, используя компонент Route с контуром, и компонент для загрузки, если URL-адрес браузера соответствует этому свойству пути.

Теперь, в вашем случае, я предлагаю вам сделать что-то вроде этого:

app.js

import {Router, Route, browserHistory} from 'react-router' 
import Layout from './components/Layout' 
// Import here all the required components used by the router such as SignIn, Register, ... 

render(
    <Layout> 
     <Router history={browserHistory}> 
      <Route path="/" component={RT_Footer}> 
      <Route path="/About Us" component={About}/> 
      <Route path="/Terms & Conditions" component={TC}/> 
      <Route path="/Register" component={Register}/> 
      // Add as many Route components as needed 
     </Router> 
    </Layout>, 
    document.getElementById('react-anchor') 

Тогда ваш файл макета должен выглядеть следующим образом:

раскладка.JS

import Header from './Header' 
import Footer from './Footer' 
import React, {Component} from 'react' 

class Layout extends Component { 
    render() { 
     return (
      <div> 
       <Header /> 
       {this.props.children} 
       <Footer /> 
      </div> 
     ) 
    } 
} 

И в вашем заголовке и компонента колонтитула, визуализации, что вы хотите, чтобы предоставить ссылку, чтобы загрузить требуемый компонент, который вы можете использовать с среагировать маршрутизатором или каким-либо другим способом предложение библиотеки (см их документацию)

Edit:

Тщательное о маршруте пути, как «Правила & условия», вероятно, не правильный путь