Question

所以这是我第一次设置这样的东西，我正在努力一点点。

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

似乎正在发生的事情是路径变化后反应不会重新渲染，因此没有任何东西被添加到dom中

当我点击转到主页组件链接时，URL栏会发生变化，但不会发生DOM更改...

这是我的代码[我要省略我的目录结构，因为我觉得这对问题不重要]

index.jsx ：加载反应应用并获取所有路线

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

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

哦，我认为你需要。

deftemplate["tasks"].splice(d, 1);

React Router - 未加载新组件

1 个答案: