javascript - React Router-未加载新组件

因此，这是我第一次设置类似的内容，我为此感到有些挣扎。

我使用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设为纯函数

编辑2：固定Routes.js

Edit3：修复了Home.js

Edit4：最终修复，

const HomeComponent =

变成

const HomeComponent = () => (

最佳答案

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

关于javascript - React Router-未加载新组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38293849/