反应路由器儿童呈现问题

我离动脉瘤试图找出这两个步骤（帮助我）。对于Stack Overflow的Javascript向导，这应该不成问题。我相信手头的问题是一个小问题，我只是因为缺乏经验而没有看到。反应路由器儿童呈现问题

当前设置

使用具有的WebPack，快速反应，作出反应路由器和节点本地JS我自己的机器上。
目前有三个组件/文件需要讨论，我将在下面列出。在看到代码之前，对每个代码的快速描述都会给出一个简单的背景。

- > Index.js（处理最终呈现的主文件）。（“主”组件）。

- > Messages.js（我试图在App.js中渲染的子组件）。

的问题 一切正常，但是当我点击链接去邮件组件，应用程序的标题和链接dissappear。但是，它确实显示了我放入消息组件中的return语句中的所有信息，这是件好事。

我的问题 我相信我只是误解了React Router内嵌套路由的基本原理。我最初的理解是，如果我像现在这样设置我的代码，那么Messages组件将在链接单击时显示在应用程序组件的INSIDE中，并且不会删除父应用程序组件中关联的任何文本。

我提供助阵以下材料为有序，

- Screenshot of the App Component rendered on the screen, showing the title and the link to messages. 
- Screenshot of the view after the messages link is clicked. 
- Component Code.

// App.js 
 
import '../assets/stylesheets/base.scss'; 
 
import React, { Component } from 'react'; 
 
import { Link } from 'react-router'; 
 

 
export default class App extends Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     <div id="title"> 
 
      <h1>My App</h1> 
 
     </div> 
 
     <div id="navigation"> 
 
      <ul> 
 
      <li><Link to="/messages">Messages</Link></li> 
 
      </ul> 
 
     </div> 
 
     {this.props.children} 
 
     </div> 
 
    ) 
 
    } 
 
}

// Messages.js 
 

 
import React, { Component } from 'react'; 
 

 
const Messages =() => { 
 
    return (
 
    <div id="messages"> 
 
     <h1>My Messages</h1> 
 
    </div> 
 
); 
 
} 
 

 
export default Messages;

// Index.js 
 
import React from 'react'; 
 
import { render } from 'react-dom'; 
 
import { Router, Route, browserHistory } from 'react-router'; 
 
import App from './components/App'; 
 
import Messages from './components/messages'; 
 

 
render((
 
    <Router history={browserHistory}> 
 
    <Route path="/" component={App}/> 
 
     <Route path="/messages" component={Messages}/> 
 
    </Router> 
 
), document.getElementById('root'))

来源

2016-08-28 Daniel Zuzevich

你的路由器配置是什么样的？ – QoP

对不起，我的歉意。我上传了App的重复内容，您可以在最后一个组件中找到路由器配置。 –

路由'/ messages'不是'/'的子路由，你必须嵌套它。例如' ' – QoP

您需要在项目模型作为一个单页的应用程序（SPA）为。类似的东西

<Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <Route path="/messages" component={Messages}/> 
     <Route path="*" component={NoMatch}/> 
    </Route> 
    </Router>

来源

2016-08-28 16:21:00

反应路由器儿童呈现问题

回答

相关问题