'match' is undefined, why?

Hi Without the curly braces it becomes an empty object It is regarding this course: https://teamtreehouse.com/library/using-the-match-object

Thank you for your reply

This is the code

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

import HTML from './courses/HTML';
import CSS from './courses/CSS';
import JavaScript from './courses/JavaScript';
import NotFound from './NotFound';


const Courses = ({match}) => {
  return (
    <div className="main-content courses">
      <div className="course-header group">
        <h2>Courses</h2>
        <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>
      </div>

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

export default Courses;

I have imported all the related libs, I just did some improvisations and used render instead of the component and the code didn't work anymore.

I'll appreciate any feedback.

Hey, why did you feel the need to improvise? Using the component would have been fine. It seems to me that you probably have a syntax error in one of your templates. Can you provide me a link to your workspace?

Hi,

I see, could you push your project to a github/gitlab repo? If yes, kindly share the repo link, I will certainly look into it. Thanks

Great. I pulled your repo, did an npm install and then run npm start. You code seems to work flawlessly, everything is rendering fine. All the routes are working so far. Ensure that you have create-react-app installed globally. Then also run an npm install command at the root of your project

npm install -g create-react-app

The only error that appears in the console is a warning saying

There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.

Let me know if you're experiencing any other problems