React Router not Rendering my Routes in Horizon

Question

I'm working on a simple web app with Horizon and React to learn more about web design.

For some reason, my Router will not Route to various sub directories. For instance, I get my Layout page when I visit localhost:8181/, but when I visit localhost:8181/Home, I get (displayed in the webpage in Firefox) 'File "dist\Home" not found."

I also get this code in the Firefox console:

The character encoding of the plain text document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the file needs to be declared in the transfer protocol or file needs to use a byte order mark as an encoding signature.

Here is my Router Code:

//Routing.jsx

import React from 'react'
import { Router, Route, Link, browserHistory, IndexRoute, IndexRedirect } from 'react-router'

//Routes:
import MainLayout from './components/MainLayout.jsx'
import Search from './components/Search.jsx'
import PickFilm from './components/PickFilm.jsx'
import Login from './components/Login.jsx'
import Home from './components/Home.jsx'

export const Routing = () => {
    return (
          <Router history={browserHistory}>
            <Route path = "/" component = {MainLayout} >
              <Route path = "/Home" component = {Home} />
              <Route path = "/Search" component = {Search} />
              <Route path = "/PickFilm" component = {PickFilm} />
            </Route>
            <Route path = "/Login" component = {Login} />
          </Router>
     )
}

Here is my Index code:

//Index.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import { Routing } from './Routing.jsx'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'

// Routing Information
ReactDOM.render((
  <MuiThemeProvider>
    <Routing />
  </MuiThemeProvider>
), document.getElementById('root'));

Here is my component for Home:

//components/Home.jsx

import React, { Component } from 'react'

export default class Home extends Component {
     render() {
          return (
               <span>You're home.</span>
          )
     }
}

Here is my component for the Layout:

//components/MainLayout.jsx

import React, { Component } from 'react'
import Navbar from './Navbar.jsx'

//Needed for onTouchTap
//http://stackoverflow.com/a/34015469/988941
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

export default class MainLayout extends Component {

     render() {
          return(
            <div>
              <Navbar />

            </div>
          );
     }
}

Like I said, the layout will render when visiting localhost:8181/. But I get that error when visiting any of the subcomponents, such as localhost:8181/Home. Where am I going wrong?

I'm using these software versions: babel-core: 6.10.4 (+ plugins and presets for react & es2015), webpack 1.13.1, Horizon 1.1.3, material-ui 0.15.2, React 15.2.1, React-router 2.5.2.

score 3 · Answer 1 · answered Jul 19 '16 at 15:18

3

You forgot to include {this.props.children} inside the render method of MainLayout so your child routes aren't being rendered at all.

answered Jul 19 '16 at 15:18

Igorsvee

4,101
1
25
21

I've included `
{this.props.children}
` right below my `` tag and nothing has changed. (Is that where I should be putting it?) As someone who is very new to React, I'm having trouble finding documentation that's accessible enough for me to understand how/why this should or shouldn't work. Since the error is "dist\Home not found", and since dist is the file where the .html and package.js files go, which is not where my src/components is, it makes me think that Horizon is looking for another html page with the name "Home" in the same folder. – Noah Allen Jul 19 '16 at 15:44
[React router docs](https://github.com/reactjs/react-router/tree/master/docs) are actually pretty good. Yes that's a correct place for children, also place your Login route under the root Route (with path="/") and get rid of the leading "/" in all paths except the root one (it should be – Igorsvee Jul 19 '16 at 15:57
Even after making those suggested changes, I'm still getting the error! I'll definitely read through more documentation and try to narrow it down a bit more. – Noah Allen Jul 19 '16 at 17:43
https://stackoverflow.com/questions/24604466/the-character-encoding-of-the-plain-text-document-was-not-declared-mootool-scr or https://teamtreehouse.com/community/character-encoding-html-not-declared – Igorsvee Jul 19 '16 at 18:01
Thanks for that. I added that to my html file. The error doesn't go away because the browser is trying to access a page that doesn't exist in my `root/dist/ folder.` I have my html in that folder. – Noah Allen Jul 20 '16 at 12:45
1

The answer turned out to be that I needed to use `hashHistory` instead of `browserHistory`, and then use links like `localhost:8181/#/login` instead of `localhost:8181/login`. Not sure why the original code didn't work (may be a compatibility issue with Horizon), but changing to `hashHistory` solved everything. – Noah Allen Jul 21 '16 at 15:54

React Router not Rendering my Routes in Horizon

1 Answers1