Question

我距动脉瘤两步之遥，试图解决这个问题（帮帮我）。对于Stack Overflow的Javascript向导，这应该没问题。我认为手头的问题是一个小修复，我只是因为缺乏经验而没有看到。

当前设置

在我自己的机器上本地使用React与Webpack，Express，React Router和Node JS。
目前需要讨论三个组件/文件，我将在下面列出。在您看到代码之前，对每个内容的快速描述将为其目的提供简单的背景信息。

- ＆GT; Index.js（处理最终渲染的主文件）。

- ＆GT; App.js（＆＃34; Main＆＃34;组件）。

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

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

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

我提供的以下材料是按订购的，

- 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.

＆＃13;

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

＆＃13;

// Messages.js

import React, { Component } from 'react';

const Messages = () => {
  return (
    <div id="messages">
      <h1>My Messages</h1>
    </div>
  );
}

export default Messages;

＆＃13;

// 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'))

＆＃13;

Answer 1

您需要将该项目建模为单页应用程序（SPA）。像这样的东西

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

React Router子渲染问题

1 个答案: