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!

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 4 Basics Navigating, Nesting and Redirecting Routes Navigating Between Routes

Kayla Johnson
Kayla Johnson
482 Points

What's the difference between putting imported elements in curly braces and not?

I saw in the video that we use import React from 'react'; And similarly when we're importing Components into other files, that works the same way. But import Link from 'react-router-dom'; does not work. It has to be import { Link } from 'react-router-dom';

Why is that? At first I thought {} were to put multiple imports at once like we did previously. But without them I get this: 45:12-16 "export 'default' (imported as 'Link') was not found in 'react-router-dom'

Hi there, was asking this question myself many times and the following link has a thorough and easily comprehensive approach https://stackoverflow.com/questions/31096597/using-brackets-with-javascript-import-syntax It explains when and how to use curly braces while importing. Thank God, someone took time to explain it so good.

3 Answers

1.To import only the Component from react you would have to do "import { Component } from 'react' ", and now you can use the component just like normal.

  1. To import the entire react module you would do " import React from 'react' ", and now you can access the component inside React or any other component like so "React.Component". Using "import React, { Component } from 'react' ". you are importing both the entire React module and a specific component of that module. We use the {} syntax when we need only certain things inside a module such as a variable, a function, a class or even another module from a large library (fine amount of modules composed to work to gather) such as React.

see here for examples: https://codesandbox.io/s/vy2y4jnwx0

A file /module can export multiple functions/ methods. When you import a file like this " import file from 'some module ' ", you import the entire file and its components/methods. And now you can access the components inside the file by doing "file.method name". or you can import only a specific method/function that's inside that file by doing
"import { method } from file". And now you can just use that method like your own method.

Kayla Johnson
Kayla Johnson
482 Points

So when I say import React, { Component } from 'react'; it's only importing the Component module from React? And without { Component } it's importing all of the react.js file?

I still don't understand why I can't do import React, Component from 'react'; why does Component have to be in { }

Maybe this helps.

import {Link} from 'react-router';

imports a named export from react-router, i.e. something like

export const Link = 42;

Source: https://stackoverflow.com/questions/33524696/es6-destructuring-and-module-imports