Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Router 4 Basics Going Further with Routing Using URL Parameters

Andrey Konovalenko
Andrey Konovalenko
9,409 Points
Posted by Andrey Konovalenko
Andrey Konovalenko
9,409 Points

sub url dose'not work in react-router project

Hi. I have problem with rendering sub url in react-router project.

After I added <Route path="/teachers" component={Featured} /> in App.js And put sub url in browser: http://localhost:9000/teachers/alena Featured component dose not render at all. React dose not work. And I have Uncaught SyntaxError: Unexpected token < in bundle.js:1 file but bundle.js has the following form:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="public/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tag above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
...
Andrey Konovalenko
Andrey Konovalenko
9,409 Points
Andrey Konovalenko
Andrey Konovalenko
9,409 Points

I found the way to solve the problem. I adde <base href="/" /> tag to my index.html file. But I still do not understand why it helps, and what I should change in my webpack.config.js file or app.js to fix this issue without adding a new tag to index.html file My webpack.config.js

const path = require('path');
module.exports = {
    entry: __dirname + '/src/index.js',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename:'bundle.js',
        publicPath:"/"

    },
    watch: true,
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

My app.js

import React from 'react';
import {
  BrowserRouter,
  Route, 
  Switch
} from 'react-router-dom';

// App compontents

import Header from './Header';
import Home from './Home';
import About from './About';
import Teachers from './Teachers';
import Courses from './Courses';
import NotFound from './NotFound';
import Featured from './Featured';

const App = () => (
  <BrowserRouter>
    <div className="container">
      <Header/>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
        <Route exact path="/teachers" component={Teachers}/>
        <Route path="/teachers" component={Featured}/>
        <Route path="/courses" component={Courses}/>
        <Route component={NotFound}/>
      </Switch>
    </div>
  </BrowserRouter>
);

export default App;

my server.js

const express = require('express');
const path = require('path');
const morgan = require('morgan');
const app = express();
const port = process.env.PORT || 9000;

// Setup logger
app.use(morgan(':remote-addr - :remote-user [:date[clf]] ":method :url HTTP/:http-version" :status :res[content-length] :response-time ms'));

// Serve static assets
app.use(express.static(path.resolve(__dirname, 'public')));

//Always return the main index.html, so react-router render the route in the client
app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
});

//make our app listen fo incoming requests on the port assigned aboves
app.listen(port, () => {
    console.log(`SERVER RUNNING ... PORT: ${port}`);
});