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 Basics Going Further with Routes Routes with Parameters

Posted by bushaf
bushaf
34,523 Points

This doesn't work!

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

Sergei Panfilov
Sergei Panfilov
5,718 Points

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
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
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>
);