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

Andy Tan
Andy Tan
35,969 Points
Posted by Andy Tan
Andy Tan
35,969 Points

React Router with Parameters - Can't access /featured URLs

Hi There

I'm doing the course https://teamtreehouse.com/library/routes-with-parameters and when I go to a URL like http://localhost:8080/featured/HTML/Tommy via the browser by typing it in, there's a blank page, and looking at React console, it says "Looking for React"

However when I add a link to the the Home page, it works fine like

<Link to="featured/HTML/Tommy">Tommy Wingo</Link>

Does anyone know why I can't access the link via the browser manually?

Any help would be appreciated

7 Answers

Alessandro Calorì
Alessandro Calorì
10,241 Points
Alessandro Calorì
Alessandro Calorì
10,241 Points

How do you refer to the JS bundle in the HTML file? Remember to add a slash at the beginning of the path otherwise it will guess that the path you use is relative to the current position:

<script type="text/javascript" src="/js/bundle.js"></script>
Alessandro Calorì
Alessandro Calorì
10,241 Points
Alessandro Calorì
Alessandro Calorì
10,241 Points

You're welcome.

I'd like to add that in order to avoid this kind of problems you can use a webpack's plugin called "HtmlWebpackPlugin" (npm install --save-dev html-webpack-plugin).

In webpack.config.js:

var HtmlWebpackPlugin = require("html-webpack-plugin");

var webpackConfig = {

    [...]

    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ]

    [...]

}

module.exports = webpackConfig;

In ./src/index.html (or wherever your HTML template is):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>My Awesome App</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

As you can see there are no <script></script> tags. Webpack will inject the necessary code during compilation.

Andy Tan
Andy Tan
35,969 Points
Andy Tan
Andy Tan
35,969 Points

Thanks for that advice, I'll definitely play around with it. Will cause less headaches in the future

Alessandro Calorì
Alessandro Calorì
10,241 Points
Alessandro Calorì
Alessandro Calorì
10,241 Points

Usually it happens when you use the browser history but webpack-dev-server is started without the option "historyApiFallback" on the commandline or in the webpack configuration.

Andy Tan
Andy Tan
35,969 Points
Andy Tan
Andy Tan
35,969 Points

Thanks for getting back to me on this.

What would be the best way to enable historyApiFallback in the react router course project?

Alessandro Calorì
Alessandro Calorì
10,241 Points
Alessandro Calorì
Alessandro Calorì
10,241 Points

Well, it should be sufficient to append the "--history-api-fallback" option in the package.json file. It should look something like this:

{
  [...],
  "scripts": {
    "build": "webpack -p",
    "start": "webpack-dev-server -d --history-api-fallback"
  },
  [...]
}

If you got other options just append it to the ones you already have.

For more info: https://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option

Andy Tan
Andy Tan
35,969 Points
Andy Tan
Andy Tan
35,969 Points

It's odd cause when i look at package.json, i see 

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p",
    "start": "webpack-dev-server --progress --inline --hot --history-api-fallback"
  },

And the issue is still happening for me. Thanks for helping though

Alessandro Calorì
Alessandro Calorì
10,241 Points
Alessandro Calorì
Alessandro Calorì
10,241 Points

Uhm, very strange. Did you take a look at the JS console? Maybe there is something there that can help you out.

Andy Tan
Andy Tan
35,969 Points
Andy Tan
Andy Tan
35,969 Points

Well its odd cause cause the only error message in the console that happens is this error message

http://localhost:8080/featured/d/bundle.js

However when its working fine, the following messages show up in

[HMR] Waiting for update signal from WDS...  bundle.js:8285 

[WDS] Hot Module Replacement enabled.  bundle.js:631

At this point I'm not sure why it's stuffing up though

Andy Tan
Andy Tan
35,969 Points
Andy Tan
Andy Tan
35,969 Points

Yep that was definitely it. Thanks so much for your help and persistance. Much appreciated =)