Robert Crous Robert Crous - 4 months ago 30
Javascript Question

React Router - new component not being loaded

So it's my first time setting something like this up and I'm struggling a little bit.

I used https://github.com/reactjs/react-router/tree/master/examples/huge-apps as my source of learning and am trying to set up a very basic layout for a react application.

What seems to be happening is that react isn't re-rendering after a path change therefore nothing ever gets added to the dom

When I click on the go to home component Link the URL bar changes but no DOM changes occur...

Here is my code [i'm leaving out my directory structure since i don't think it's important for the problem]




index.jsx: Load up the react app and get all routes

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: Constant to keep all of my routes so that I don't have to manually specify them in 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: Parent most component for my app

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 Grab all my route information and getComponent lives here

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

export default HomeRoute;


HomeComponent.jsx my very basic home component

import React from 'react';





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

export default HomeComponent;


Edit1: Made App.jsx pure function

Edit2: Fixed Routes.js

Edit3: Fixed Home.js

Edit4: Final fix,

const HomeComponent =


changed to

const HomeComponent = () => (

Answer

You App should be a component not a function returning an object. Right now you are mixing two approaches.

Either a function (stateless component)

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;

Or a statefull component that has render method

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;

Same with HomeComponent

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

And you need to fix route config as well

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

Ohh, and I think you need.

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