React Router入门

What You know from this article :

您从本文中了解到的内容：

1. What is React Router
   什么是React Router
2. Create a New React Project
   创建一个新的React项目
3. How to install it and configure in React Project
   如何在React Project中安装和配置
4. Static Routing
   静态路由
5. Dynamic Routing
   动态路由
6. API Hooks use in React Router
   API挂钩在React Router中的使用

1.React路由器(1.React Router:)

React Router is the standard routing library for React.React Router, and dynamic, client-side routing, allows us to build a single-page web application with navigation without the page refreshing as the user navigates.

React路由器是React的标准路由库。 React Router和动态的客户端路由使我们能够构建具有导航功能的单页Web应用程序，而无需随着用户导航刷新页面。

2.创建一个新的React项目： (2. Create a New React Project:)

Firstly, will open an Code Editor that name is (Visual Studio Code).After that , simply open the terminal section…

首先，将打开一个名为(Visual Studio Code)的代码编辑器。之后，只需打开终端部分…

Secondly , I will create a react app that name is (react-router-practice) by this following command in the terminal:

其次，我将在终端中通过以下命令创建一个名称为(react-router-practice)的react应用程序：

Thirdly, Make sure you have to work with right directories/folder. if you have not in right folder then you have command on terminal ..

第三，确保您必须使用正确的目录/文件夹。 如果您不在正确的文件夹中，则在终端..上有命令

Wow,, Your first React project is created.Enjoy with one cup of coffee.

哇，您的第一个React项目已经创建好了，喝一杯咖啡吧。

3.安装React Router： (3. Install React Router:)

To,,install React Router in Your Existing React project (react-router-practice) then you have simply write on the terminal by this following command.

要在现有React项目中安装React Router(react-router-practice)，然后只需通过以下命令在终端上进行写操作。

Now You have to waiting for install complete!!!!!!!.To know more about you have to visit the link : https://reactrouter.com/web/guides/quick-start

现在，您必须等待安装完成！!!!!!!。要了解有关您的更多信息，请访问链接： https : //reactrouter.com/web/guides/quick-start

配置React Router： (Configure React Router:)

As you know to install something from react you have to import all feature as you have to used in your project.For use React Router You have to must import some module form “react-router-dom” in App.js

当您知道要从react安装某些东西时，必须导入项目中要使用的所有功能。要使用React Router，必须在App.js中导入“ react-router-dom”模块形式

(i)BrowserRouter => BrowserRouter is used for doing client side routing with URL segments.<BrowserRouter>, is usually given an alias of ‘Router’ and this is the parent component that is used to store all of your <Route> components.

(i)BrowserRouter => BrowserRouter用于通过URL段进行客户端路由。< BrowserRouter >通常被赋予别名“ Router”，这是用于存储所有<Route>组件的父组件。

(ii) Switch => The <Switch> Component render the first route that matches the path.It also allows Nested Routing.

(ii)Switch => <Switch>组件呈现与该路径匹配的第一条路由，还允许嵌套路由。

(iii) Route => It will only separate components Route based on the url path.It allow to show at a time one Route only. For example..

(iii)Route =>它将仅基于URL路径分离组成Route的组件，它一次只能显示一个Route。 例如..

(iv) Link => The <Link> will create url anchor for single page application.It seems to be like …

(iv)链接=> <Link>将为单页应用程序创建URL锚。

Let’s start our journey on React Routing……

让我们开始在React Routing上的旅程吧……

Firstly ,select (src) folder and create a folder in this directory,, that name is (components) . Now select components folder and create two file ( first one is Friend.js and second one is Food.js.

首先，选择(src)文件夹并在此目录中创建一个文件夹，名称为(components)。 现在选择components文件夹并创建两个文件(第一个是Friend.js ，第二个是Food.js。

After that ,,, Just create functional component on this file…Do not Worry about it … it seems like very easy if you familiar with React.

之后，只需在此文件上创建功能组件……不用担心……如果您熟悉React，这似乎非常容易。

In Friend.js file..

在Friend.js文件中。

This simple quite easy task..In this component I will use simple <Link> component that present the anchor url. Also used an attribute to=”/friend” that is static path .Once you have used <Link> then you must import it.

这个简单的非常简单的任务。在此组件中，我将使用简单的<Link>组件来显示锚点URL。 还使用了静态属性“ = / friend”作为属性。一旦使用了<Link>，则必须将其导入。

In Food.js file..similar all the pattern as you work previous component.

在Food.js文件中，类似上一个组件时的所有模式。

Wow…that’s great you are created two different component in ReactJs.

哇，太好了，您在ReactJs中创建了两个不同的组件。

4.静态路由： (4. Static Routing:)

Static routing is a form of routing that occurs when a router uses a manually-configured routing entry.

静态路由是路由器使用手动配置的路由条目时发生的一种路由形式。

Now open the App.js file and set React Router. How to use React Router in App.js file . The answer quite easy….

现在打开App.js文件并设置React Router。 如何在App.js文件中使用React Router。 答案很简单……。

Firstly, open the App.js file and configure React Router,,,,It seems to be like as

首先，打开App.js文件并配置React Router，看起来就像

Firstly Router apply on the Friend.js file……….You must import Friend.js file in the App.js. (show App.js file in below)

首先，路由器在Friend.js文件上应用…………。您必须将Friend.js文件导入App.js。 (在下面显示App.js文件)

So,,,nice you have to used React Router in staticly. Now You have command the terminal …..

因此，不错，您必须静态使用React Router。 现在，您已经命令了终端…..

=> NPM开始 (=> npm start)

After start your server then you will see “Nothing”. Why Nothing?

启动服务器后，您将看到“无”。 为什么什么也没有？

Because you manually set the static path=”/friend” . So you do not see anything.The problem is solved easily … do not be upset!!!

因为您手动设置了静态路径=“ / friend”。 这样您就什么也看不到。问题很容易解决……不要沮丧！！！

Just Write where your project is open such as (Chrome Browser).Just type the

只需在打开项目的位置(例如(Chrome浏览器))中输入内容即可。

=> localhost:3000/friend

=>本地主机：3000 /朋友

Then you see your dream output like as……

然后，您会看到自己的梦想输出，就像……

类似地，使用Food.js组件并使用其他功能： (Similarly use Food.js Component and use Other Functionality:)

This time I will add more Route except Friend and Food Component.

这次，我将添加除“朋友”和“食物组件”之外的更多路线。

The “exact” and “*” …Is that right!!!!!!!!

“精确”和“ *” ……对！！！！！

Okay,,,exact means the path of url which matches the url. It allows to match the “/” after exact route finding. if finding “/something” it will not interact correctly.

好吧，精确是指与网址匹配的网址路径。 找到精确的路线后，可以匹配“ /”。 如果找到“ /某物”，它将无法正确交互。

“*” What!! It quite easy. For example, when you visit website page ,, sometimes it will show 404 error occured …that means it does not match any url path of the route so that It will showing Error Message 404 or something else.

“ *”什么！！ 这很容易。 例如，当您访问网站页面时，有时会显示404错误发生……这意味着它与路线的任何url路径都不匹配，因此它将显示错误消息404或其他内容。

Any Confusion of Static Routing!!!!!!!!

静态路由的任何困惑!!!!!!!!

What happen you do not know the exact url path but you have to do something ? The answer is very easy then you have to use Dynamic Routing

您不知道确切的URL路径会发生什么，但是您必须做些什么？ 答案很简单，那么您必须使用动态路由

5，动态路由(5.Dynamic Routing:)

when Dynamic Routing use!!! The answer is ….Suppose You have some country with unique code . when specific country show in the url path then you have to show the country detail.

当使用动态路由时！！！ 答案是…。假设您有一个国家/地区具有唯一的代码。 当特定国家/地区在网址路径中显示时，则必须显示国家/地区详细信息。

Just you have to pass the unique code of the country in the route path.

只是您必须在路线中传递国家/地区的唯一代码。

It looks like…….Firstly , create a component Country.js then write into inside the component……

看起来像……。首先，创建一个组件Country.js，然后在该组件内部写入……

<Link to={“/country/”+code}>Dynamic Routing</Link>

<链接到= {“ /国家/” +代码}>动态路由</ Link>

After that Create a component CountryDetail.js and Route look like….

之后，创建一个组件CountryDetail.js和Route就像…。

Note: (:code) means we are just passing parameter that name is code.

注意：( ：code)表示我们只是传递名称为code的参数。

The Question in your mind How to access the parameter. The answer is very simple…we called a Hook that name useParams(). it return a object of values that matches the path of the url.

您脑海中的问题如何访问参数。 答案很简单......我们叫了一个钩子，名useParams()。 它返回一个与URL路径匹配的值的对象。

Now go to the CountryDetail.js component use the Hook . You must import it remember that everytime.

现在使用Hook转到CountryDetail.js组件。 您必须每次导入时都记住这一点。

Is that very Hard!!! No this is little bit confusion so i clear the confusion.

那很难吗！！！ 不，这有点混乱，所以我清除了混乱。

=> const{code} = useParams();

=> const {code} = useParams();

Here, Code is the parameter name that we previously declare in the Route.we just destructuring the parameter from Hook. We can get the code parameter’s value from code variable.

在这里，Code是我们先前在Route中声明的参数名称。我们只是从Hook分解参数。 我们可以从代码变量中获取代码参数的值。

Wow …..You complete the React Router series. Now apply this logic and create many other SPA(Single Page Application) .

哇.....您完成了React Router系列。 现在，应用此逻辑并创建许多其他SPA(单页应用程序)。

Wish You All The Best!!!

祝你一切顺利！！！

翻译自: https://medium.com/@foyshalrahman27/getting-started-with-react-router-4e54f13aaee0