javascript - React Router - 未加载新组件

Question

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

我用了https://github.com/reactjs/react-router/tree/master/examples/huge-apps作为我的学习来源，我正在尝试为 React 应用程序设置一个非常基本的布局。

似乎发生的情况是，在路径更改后，React 不会重新渲染，因此不会将任何内容添加到 dom

当我点击 go to home 组件 Link 时，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')
);

Routes.js:保留所有路由的常量，这样我就不必在 index.js 中手动指定它们

import App from './App.jsx';
import Home from '../routes/Home/Home.js';

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

export default Routes;

App.jsx:我的应用程序的大部分组件的父级

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;

Home.js 获取我所有的路线信息，getComponent 位于此处

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

export default HomeRoute;

HomeComponent.jsx 我非常基本的主页组件

import React from 'react';

<小时/>

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

export default HomeComponent;

编辑1:制作App.jsx纯函数

编辑2:修复Routes.js

Edit3:修复了 Home.js

编辑4:最终修复，

const HomeComponent = 

更改为

const HomeComponent = () => (

Answer 1

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

函数(无状态组件)

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;

或者具有 render 方法的有状态组件

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;

与HomeComponent相同

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
  ],
};