Javascript React路由器-未加载新组件

所以这是我第一次设置这样的东西，我有点挣扎

我用它作为我的学习来源，并试图为react应用程序建立一个非常基本的布局

似乎正在发生的是，在路径更改后react不会重新渲染，因此不会向dom添加任何内容

当我单击go to home组件链接时，URL栏会发生更改，但不会发生DOM更改

这是我的代码[我省略了我的目录结构，因为我认为它对这个问题不重要]

---

index.jsx：加载react应用程序并获取所有路由

import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router';

import Routes from './app/Routes.js';

render(
  <Router
    history={browserHistory}
    routes={Routes}
  />,
  document.querySelector('.js-mount-point')
);

App.jsx：我的应用程序的父most组件

import React from 'react';
import { Link } from 'react-router';

const App = props => {
  console.log(props);
  return (
    <div>
      <h1>Hello World!</h1>
      <p><Link to="#/home">Go to Home Component</Link></p>
      {props.children} 
    </div>
  );
};

export default App;

HomeComponent.jsx我最基本的home组件

import React from 'react';

import React from 'react';
import { Link } from 'react-router';

const App = props => {
    console.log(props.children);
    return (
      <div>
        <h1>Hello World!</h1>
        <p><Link to="/home">Go to Home Component</Link></p>
        {props.children} 
      </div>
    );
};

export default App;

---

改为

const HomeComponent = () => (

---

您

App

应该是一个组件，而不是返回对象的函数。现在，您正在混合两种方法

函数（无状态组件）

与

HomeComponent相同

const HomeComponent = () => (
    <div>
      <h2>Welcome Home</h2>
    </div>
);

哦，我想你需要

const Routes = {
  path: '/',
  component: App,
  childRoutes: [
    Home
  ],
};

我现在将我的应用程序更改为无状态组件，但它仍以相同的方式运行？props.children仍然返回null，但props.route.childRoutes确实包含一个带有my route的对象数组是否已修复
HomeComponent
？您现在拥有的代码毫无意义。@RobertCrous，您还需要修复routes config。好的，由于App.jsx是一个无状态组件，我收到了一个新错误：_renderNewRootComponent（）：呈现方法应该是一个纯props和state函数；不允许从渲染触发嵌套组件更新。如有必要，在componentDidUpdate中触发嵌套更新。检查App的render方法。@您不需要从无状态组件中调用render。实际上，您需要使用根组件（在您的情况下是路由器）调用它一次。
render
在那里做什么？你是说
return
？@YuryTarabanko-ah-man复制了错误版本的代码。。。给我一秒钟，除了
index.jsx
file.Fix
HomeRoute
之外，您实际上不需要
render
任何地方。路径应该是
home
。链接应该是
Blah Blah
。检查
HomeComponent
它应该是一个函数
const HomeComponent=（）**=>**（…）
const HomeComponent = () => (

import React from 'react';
import { Link } from 'react-router';

const App = props => {
    console.log(props.children);
    return (
      <div>
        <h1>Hello World!</h1>
        <p><Link to="/home">Go to Home Component</Link></p>
        {props.children} 
      </div>
    );
};

export default App;

import React, { Component } from 'react';
import { Link } from 'react-router';

class App extends Component {
  render() {
    console.log(this.props.children);
    return (
      <div>
        <h1>Hello World!</h1>
        <p><Link to="/home">Go to Home Component</Link></p>
        {this.props.children} 
      </div>
    );
  }
};

export default App;

const HomeComponent = () => (
    <div>
      <h2>Welcome Home</h2>
    </div>
);

const HomeRoute = {
  path: 'home', //no # needed
  title: 'Home',
  getComponent(nextState, cb) {
    require.ensure([], (require) => {
      cb(null, require('./HomeComponent.jsx').default);
    });
  },
};

const Routes = {
  path: '/',
  component: App,
  childRoutes: [
    Home
  ],
};