Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Router Basics Going Further with Routes Routes with Parameters

This doesn't work!

None of the query parrameter things from this video work...

Important that your script reference in index.html should be <script src="/bundle.js"></script> otherwise this won't work. It was pointed before, but i missed it.

Bradley Dubowsky
Bradley Dubowsky
9,198 Points

I had Linting issues or Babel Core issues while working through this project. Had to use <Route path="/featured(/:topic)(/:name)" />

1 Answer

Sarah Ellis
Sarah Ellis
959 Points

I managed to get this to work by using match instead of props

Featured.js

import React from 'react';

{/* This is a stateless component */}
const Featured = ({ match }) => {
    let topic = match.params.topic;
    let name = match.params.name;

    return (
        <div className="main-content">
          <h2>Featured: {name}</h2>
          <p>Introducing <strong>{name}</strong>, a teacher who loves teaching courses about <strong>{topic}</strong>!</p>
        </div>
    );
};

export default Featured;

And made sure in my router.js that the {NotFound} component was the last Route

const routes = (
    <Router>
        {/* If path is / then load the Home component */}
        <App>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
                <Route path="/teachers" component={Teachers} />
                <Route path="/courses" component={Courses} />

                {/*
                    The : sets custom URL's which can be anything
                    Have setup :topic and :name into variables in the Featured
                    component which take on whatever is written in the url e.g
                    /featured//mattellis
                */}
                <Route path="/featured/:topic/:name" component={Featured} />

                {/* Special path for urls that don't exist */}
                <Route component={NotFound} />
            </Switch>
        </App>
    </Router>
);