Explore
For Enterprise
Join for Free
Log In

Artes e Humanas
Negócios
Ciência da Computação
Ciência de Dados
Tecnologia da informação
da saúdesaúde
Matemática e Lógica
Desenvolvimento Pessoal
Ciência e Engenharia Física
Ciências Sociais
Línguas
Notas
Certificados

Explore todo o Coursera

Navegar
Pesquisar
For Enterprise
Entrar
Inscreva-se gratuitamente

React Router: Parameters

Loading...

Front-End Web Development with React

Universidade de Ciência e Tecnologia de Hong Kong

4.8 (504 classificações) | 19K alunos inscritos

Curso 2 de 4 no Full-Stack Web Development with React Programa de cursos integrados

This course explores Javascript based front-end application development, and in particular the React library (Currently Ver. 16.3). This course will use JavaScript ES6 for developing React application. You will also get an introduction to the use of Reactstrap for Bootstrap 4-based responsive UI design. You will be introduced to various aspects of React components. You will learn about React router and its use in developing single-page applications. You will also learn about designing controlled forms. You will be introduced to the Flux architecture and Redux. You will explore various aspects of Redux and use it to develop React-Redux powered applications. You will then learn to use Fetch for client-server communication and the use of REST API on the server side. A quick tour through React animation support and testing rounds off the course. You must have preferably completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of Bootstrap 4 to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended. At the end of this course you will: - Be familiar with client-side Javascript application development and the React library - Be able to implement single page applications in React - Be able to use various React features including components and forms - Be able to implement a functional front-end web application using React - Be able to use Reactstrap for designing responsive React applications - Be able to use Redux to design the architecture for a React-Redux application

Visualizar o programa do curso

Avaliações

4.8 (504 classificações)

5 stars
410 ratings
4 stars
75 ratings
3 stars
12 ratings
2 stars
5 ratings
1 star
2 ratings

DC

Jul 10, 2018

Dope react course.I hesitated to even choose react because of the syntax of react.But its cool now as im used to it . Felt comfortable while learning

PM

Aug 24, 2018

Awesome course, which has given me the most of the insights of the React and i started converting my real time projects after taking this course.

Na lição

React Router and Single Page Applications

In this week, you will learn about various component types. You will learn about React router and its use in designing single page applications. You will also learn about single page applications and use React Router to design single page applications.

Single Page Applications9:24

Exercise (Video): Single Page Applications Part 123:35

React Router: Parameters6:52

Exercise (Video): Single Page Applications Part 223:31

Ministrado por

Jogesh K. Muppala
Associate Professor

Transcrição

We have already implemented

our single page application by integrating three different components,

and then providing a way of navigating between these views within our React application.

The one thing that we have left out so far,

is showing the details of a chosen dish.

Now, that part requires us to use an additional feature of the React Router,

that enables us to pass parameters in the URL that we use in the React Router.

Now, in this lecture,

we will learn how to pass parameters through the URL,

and make use of the parameters in another component in order render the view there.

So, when we choose a specific dish,

we will pass in the details about the dish ID as a route parameter to our React Router,

and that information will get delivered into

the specific dish detail component where the appropriate dish can be rendered.

So how does this work?

To help us understand how route parameters work.

Let's look at the React Router,

and we already have learned that the various parts to

the various views in our React application can be specified using the URLs.

Now, what if we attach a parameter value to the URL?

So for example, if we want to display dish number 42,

if we can place /menu/42,

and the interpret 42 to be a parameter which identifies

the specific dish that we want to display.

Then, if this number 42 can be delivered to the dish detail component,

and then it can make use of that to select the appropriate dish,

and then display that appropriate dish.

So, how do we pass parameters like this in the URL of a route, using React Router?

So, this is where the route parameters enable us to specify the part of

the route as a parameter

that will have to be interpreted appropriately by the React Router.

So, for example when we specify a path in our application,

we can say path as 'menu/:id'.

So, if you specify a path like that with a parameter starting with a colon,

then whatever follows that will be interpreted as a route parameter by React Router.

So, when you say menu colon id,

id becomes a token which gives the parameter,

the route parameter that can then be used by React Router to

appropriately render the view corresponding to that path.

This is the strategy that we're going to employ in

passing that chosen dish's id over to React Router,

and enable that to set up the dish detail component to

display the details of the chosen dish.

Now how do these route parameters become available?

See, these route parameters when you specify that within our code,

we would specify that as link two,

and then you can say menu,

and then you can even provide that second part

as a value that is dependent upon a JavaScript values property.

So, the dish id is part of the dish's property there.

We're going to be able to extract that and put it into a link by using this.

Note that when we specify something like this we'll have to enclose this in back quotes,

back quotes, not the forward quotes, back quotes.

So this is very important for you to note,

how we can add this into this.

So, the same procedure can be used also in NavLink,

or wherever you want to pass this information over.

So make a note of how this has been passed,

and we will be updating our application to use this approach to passing the route.

Now when this happens, this route information,

what the route component does,

is it passes three pass props to the component which it is rendered.

Three props that it passes is called match, location, and history.

Match is the one that carries the route parameters inside it as its own properties.

Location where you are in the URL location and history will allow you to go back.

Now I'm not going to deal with location and history and how we make

use of this in this exercise,

we will defer that to a later stage.

But, we'll look at how the match prop can be used to

extract the parameter that is passed in the URL.

The exercise will illustrate that in more detail.

Now, what does this match object provide for us?

This match object enables us to determine a path.

So, when you specify various route parameters,

these become available through the match object as params,

which is a propagated gets associated with the match object.

So, when you say match.params,

you'll be able to get access to all the params,

as a key value pair here.

So, each param is associated with a key value pitch.

So, params, said if we specified the path as menu:id,

then this id will be used as a key and the value.

So, if you specify the value as menu/42,

then 42 will be the value.

So, the key will be id and value will be 42.

And so that's how that becomes available within

the match object that is given to your component and there you

can extract that information out in order to

decide how to make use of their information within your component.

So, this is the basic strategy that we're going to be making use of to

pass route parameters over to another component,

and then make use of it within that component.

Now, understanding this, let's move

to update our React application so that we can display

the details of any dish that the user clicks on in

a separate view within our React application.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2019 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play

Coursera
Sobre
Liderança
Carreiras
Lista de cursos
Certificados
Certificados MasterTrack™
Notas
For Enterprise
For Government

Comunidade
Learners
Partners
Developers
Beta Testers
Translators

Conectar
Blog
Facebook
LinkedIn
Twitter
Instagram
YouTube
Tech Blog

Mais
Termos
Privacidade
Ajuda
Acessibilidade
Imprensa
Contato
Diretório
Afiliados