React Router - 未加载新组件

Question

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

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

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

当我点击转到主页组件链接时，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;

Edit1：制作 App.jsx 纯函数

Edit2：固定 Routes.js

Edit3：修复 Home.js

Edit4：最终修复，

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