Refactor navigation to its own component

Question

I tried to refactor the courses navigation to its own component but when i use the component i got the following error: Cannot read property 'url' of undefined

import React from 'react';
import {NavLink, Route, Redirect} from 'react-router-dom';

import HTML from './courses/HTML';
import JavaScript from './courses/JavaScript';
import CSS from './courses/CSS';
import Navigation from './courses/navigation';

const Courses = ({match}) => (
  <div className="main-content courses">
    <div className="course-header group">
      <h2>Courses</h2>
      <Navigation />
    </div>

    {/* Write routes here... */}
    <Route exact path={match.path} render={()=> <Redirect to={`${match.path}/html`} />} />
    <Route path={`${match.path}/html`} component={HTML} />
    <Route path={`${match.path}/javascript`} component={JavaScript} />
    <Route path={`${match.path}/css`} component={CSS} />
  </div>
);

export default Courses;

and the component

import React from 'react'
import {NavLink, Route} from 'react-router-dom'

export default function Navigation({match}) {
  return (
    <ul className="course-nav">
        <li><NavLink to={`${match.url}/html`}>HTML</NavLink></li>
        <li><NavLink to={`${match.url}/css`}>CSS</NavLink></li>
        <li><NavLink to={`${match.url}/javascript`}>JavaScript</NavLink></li>
      </ul>
  );
}

Answer 1 · 2017-07-24T03:28:53Z

July 24, 2017 3:28am

I'm new to jsx myself but where you have

<Navigation />

I'm not sure but maybe you need to somehow pass in

match

just a wild guess at this point, maybe something to try...

Welcome to the Treehouse Community

Looking to learn something new?

Alex Maguey

Alex Maguey

Refactor navigation to its own component

1 Answer

Ken Stone

Ken Stone