Wednesday, 19 April 2017

Unable to access url route when typing in url using react-router

Just trying to get dynamic routes working with react router - but when I type the url in, say localhost:3000/5 for example, I get the error "cannot GET /5". My router is set up as follows:

class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <ConnectedRouter history={history}>
                    <div>
                        <Route exact path="/" component={Home} />
                        <Route path="/:id" component={Profile} />
                    </div>
                </ConnectedRouter>
            </Provider>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

And below is my server and server middleware:

Middleware:

module.exports = app => {
app.use(webpackHotMiddleware(compiler, {
    log: console.log
}))

app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
    stats: {colors: true}
}))

app.use(morgan('dev'))
app.use(express.static('dist'));
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

}

Server:

require('./middleware')(app);
const people = [];

app.on('listening', () => {
    controllers.getPeopleData(people);
});

app.get('/people', (req, res) => {
    const sortedPeople = controllers.alphabetizePeople(people);
    res.json(sortedPeople);
})

app.use(function(err, req, res, next) {
  if (err) {
    res.status(500).send(err);
    console.log(err.message);
  }
  next();
});

app.listen(3000, () => {
    app.emit('listening');
});
console.log('listening on 3000');

Any input is greatly appreciated - thank you!



via TigerBalm

No comments:

Post a Comment