How to get routing working in React.js

Question

I'm working on the following react project, and am trying to get the relative links in the navbar to work properly. However, when I click on About Me I get the following response,

Cannot GET /about

The code I am working with looks like the following,

App.js

// This component handles the App template used on every page.
import React, {PropTypes} from 'react';
import Header from './common/Header';
import NavBar from './common/navbar';
import Router from 'react-router';
import { Link, IndexLink } from 'react-router';

var navbar = {};
navbar.brand = {linkTo: "http://chrisrjones.com", text: "chrisrjones.com"};
navbar.links = [
  // <Link to="/about" activeClassName="active">About</Link>
    {linkTo: "/about", text: "About Me"},
    {linkTo: "#", text: "Contact"},
    {dropdown: true, text: "Contribute", links: [
        {linkTo: "#", text: "Sign Up"},
        {linkTo: "#", text: "Login"}
    ]}
];

class App extends React.Component {
    render() {
        return (
            <div className="container-fluid">
                <NavBar {...navbar}/>
                <Header/>
                {this.props.children}
            </div>
        );
    }
}

App.propTypes = {
    children: PropTypes.object.isRequired
};

export default App;

Also, to get an idea of what the navbar code looks like you can check out this codepen that I referenced for the navbar code in my project.

Robsonsjre · Accepted Answer · 2017-02-13 17:29:19Z

1

Looking inside your Navbar component I found one things that is may be causing this issue, there are two approach for that:

Using href, you should use absolute path, not relative
Use Link from react-router instead of 'a':

Example approach 1:

<a className="navbar-brand" href={ 'http://www.absolutepath.com' + this.props.linkTo}>{this.props.text}</a>

Example approach 2:

import { Link } from 'react-router'

<Link to={ this.props.linkTo }>
  <span className="navbar-brand">{this.props.text}</span>
</Link>

answered Feb 13, 2017 at 17:29

Robsonsjre

1,57112 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ming Soon · Accepted Answer · 2017-02-13 17:13:11Z

0

In your server.js, redirect all routes requests to the root /index.html file (ignoring file requests):

app.use('*', function (req, res, next) {
  const filename = path.join(compiler.outputPath, 'index.html')
  compiler.outputFileSystem.readFile(filename, (err, result) => {
    if (err) {
      return next(err)
    }
    res.set('content-type', 'text/html')
    res.send(result)
    res.end()
  })
})

answered Feb 13, 2017 at 17:13

Ming Soon

1,0182 gold badges12 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to get routing working in React.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related