by Nader Dabit

纳德·达比特(Nader Dabit)

React Router入门指南 (Beginner’s Guide to React Router)

Or what I wish I knew when starting with React Router.

还是我希望从React Router开始时所知道的。

Click here to go to the Github repo

单击此处转到Github存储库

This tutorial uses React Router version 2.0.1 and Babel version 6.7.4

本教程使用React Router版本2.0.1和Babel版本6.7.4

React Router is the standard routing library for React. From the docs:

React Router是React的标准路由库。 从文档：

“React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.”

“ React Router使您的UI与URL保持同步。 它具有一个简单的API，具有强大的功能，例如，延迟代码加载，动态路由匹配和内置的位置转换处理。使URL成为您的首要考虑，而不是事后考虑。”

步骤1.开始 (Step 1. Getting Started)

To get started you can either clone the starter repo and jump to step two, or follow along the next steps and set up your project manually.

要开始使用，您可以克隆入门存储库并跳至第二步，或者按照以下步骤手动设置项目。

手动设定 (Manual Setup)

First, let’s get our environment set up with React, Babel, and webpack. First create a folder and cd into it. Then run npm init -y:

首先，让我们使用React，Babel和webpack设置环境。 首先创建一个文件夹并cd进入它。 然后运行npm init -y：

npm init -y
  • -y just answers yes to all of the questions-y对所有问题回答是

Next, install react, react-router, and react-dom and save them as dependencies:

接下来，安装react，react-router和react-dom并将它们另存为依赖项：

npm i react react-dom react-router@2.0.1 --save

Next, install our dev dependencies. These will be webpack, webpack-dev-server, babel-core, babel-loader, babel-preset-es2015, and babel-preset-react

接下来，安装我们的开发依赖项。 这些将是webpack，webpack-dev-server，babel-core，babel-loader，babel-preset-es2015和babel-preset-react

npm i webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

Now, let’s create the configuration files for webpack and babel:

现在，让我们为webpack和babel创建配置文件：

touch .babelrc webpack.config.js

Next, let’s create a folder for our code. We’ll call this folder app:

接下来，让我们为代码创建一个文件夹。 我们将这个文件夹称为：

mkdir app

In the app directory create three files: index.html app.js main.js

在app目录中，创建三个文件：index.html app.js main.js

cd apptouch index.html app.js main.js

Our file structure should now look like this:

现在，我们的文件结构应如下所示：

Now, open the .babelrc file and add the presets for react and ES2015:

现在，打开.babelrc文件并添加react和ES2015的预设：

{ "presets": [  "es2015",  "react" ]}

In webpack.config.js, add the following configuration to get us started:

在webpack.config.js中，添加以下配置以开始使用：

module.exports = {  entry: './app/main.js',  output: {    path: './app',    filename: 'bundle.js'  },  devServer: {    inline: true,    contentBase: './app',    port: 8100  },  module: {    loaders: [      {        test: /\.js$/,        exclude: /node_modules/,        loader: 'babel'      }    ]  }}

If you would like to learn more about webpack and babel, check out my tutorial on beginning webpack.

如果您想了解有关webpack和babel的更多信息， 请查看我有关开始webpack的教程。

Now that webpack and babel are set up. Let’s create a shortcut for webpack-dev-server. Open package.json and insert the following script in the “scripts” key:

现在已经设置了webpack和babel。 让我们为webpack-dev-server创建一个快捷方式。 打开package.json并在“ scripts”键中插入以下脚本：

"scripts": {  "start": "webpack-dev-server"}

Now, we can just run npm start to start our project.

现在，我们可以运行npm start来启动我们的项目。

Let’s now set up our HTML and React. Open index.html and create a base html page. Then, add a div with the id of root, and a script tag referencing bundle.js:

现在让我们设置HTML和React。 打开index.html并创建一个基本的html页面。 然后，添加一个ID为root的div和一个引用bundle.js的脚本标签：

<!DOCTYPE html>  <html lang="en">  <head>    <meta charset="UTF-8">    <title>React Router</title>  </head>  <body>    <div id="root"></div>    <script src="./bundle.js"></script>  </body></html>

Now, let’s go into our main.js and set up an entry point for our app. Type this into your main.js file:

现在，让我们进入main.js并为我们的应用程序设置一个入口点。 在您的main.js文件中输入以下内容：

import React from 'react'import ReactDOM from 'react-dom'import App from './app'ReactDOM.render(<App />, document.getElementById('root'))

Now, let’s go into app.js and create our app component. Open app.js and type the following:

现在，让我们进入app.js并创建我们的应用程序组件。 打开app.js并输入以下内容：

import React, { Component } from 'react'import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
const App = () => <h1>Hello World!</h1>
export default App

We are not using Component or any of the Router / react-router components yet, but we are bringing them in so we can get started in step two.

我们尚未使用Component或任何Router / react-router组件，但我们将它们引入，以便我们可以从第二步开始。

Now, if you run the project and navigate to http://localhost:8100/ you should get ‘Hello World!!!!!!’ on your screen:

现在，如果您运行该项目并导航至http：// localhost：8100 / ，则应显示“ Hello World !!!!!!”。 在屏幕上：

npm start

步骤2.基本路由 (Step 2. Basic Routing)

Let’s set up a basic route. We will replace the App component with a React class, which will return a Router component. Router will wrap all of the routes we are going to define.

让我们建立一条基本路线。 我们将用React类替换App组件，这将返回一个Router组件。 路由器将包装我们要定义的所有路由。

Each route will be identified in a <Route> component. The <Route> component will take two properties: path and component. When a path matches the path given to the <Route> component, it will return the component specified.

每个路由将在<Route>组件中标识。 <Route>组件将具有两个属性：path和component。 当路径与给<Route>组件的路径匹配时，它将返回指定的组件。

In app.js, refactor the App component to look like this:

在app.js中，将App组件重构为如下所示：

import React, { Component } from 'react'import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
class App extends Component {  render() {    return (      <Router history={hashHistory}>        <Route path='/' component={Home} />        <Route path='/address' component={Address} />      </Router>    )  }}
const Home = () => <h1>Hello from Home!</h1>const Address = () => <h1>We are located at 555 Jackson St.</h1>
export default App

Now, if you navigate to http://localhost:8100/ you should see our Home component, and if you navigate to http://localhost:8100/#/address you should see our Address component.

现在，如果导航到http：// localhost：8100 / ，则应该看到我们的Home组件；如果导航到http：// localhost：8100 /＃/ address ，则应该看到我们的Address组件。

You will notice that there are random strings after the hash in your address bar:

您会注意到地址栏中的哈希后面有随机字符串：

When using hash history, you’ll see an extra item in your query string that looks something like _k=123abc. This is a key that history uses to look up persistent state data in window.sessionStorage between page loads. Read more here.

使用哈希历史记录时，您会在查询字符串中看到一个类似于_k = 123abc的项。 这是历史记录用来在页面加载之间在window.sessionStorage中查找持久状态数据的键。 在这里。

If you would like a cleaner address, or you are using this in production, you may want to look into browserHistory vs hashHistory. When using browserHistory you must have a server that will always return your server at any route, for example if using nodejs, a configuration like the following (from the docs) would work:

如果您想要一个更简洁的地址，或者在生产中使用该地址，则可能需要研究browserHistory与hashHistory。 当使用browserHistory时，您必须拥有一台服务器，该服务器将始终以任何路线返回您的服务器，例如，如果使用nodejs，则如下所示的配置(来自docs)将起作用：

const express = require('express')const path = require('path')const port = process.env.PORT || 8080const app = express()// serve static assets normallyapp.use(express.static(__dirname + '/public'))// handle every other route with index.html, which will contain// a script tag to your application's JavaScript file(s).app.get('*', function (request, response){  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))})app.listen(port)console.log("server started on port " + port)

To learn more about browserHistory, check out this link.

要了解有关browserHistory的更多信息，请查看此链接。

For the rest of this tutorial, we will be using hashHistory.

在本教程的其余部分中，我们将使用hashHistory。

步骤3. 404路线 (Step 3. 404 route)

Now, what happens if we hit a route that is not defined? Let’s set up a 404 route and component that will return if the route is not found:

现在，如果我们遇到未定义的路线会怎样？ 让我们设置一个404路由和组件，如果找不到该路由，它将返回：

const NotFound = () => (  <h1>404.. This page is not found!</h1>)

Now, below our ‘/address’ route, create the following route:

现在， 在我们的“ / address”路由下，创建以下路由：

<Route path='*' component={NotFound} />

Now, if we navigate to some route that has not been defined (http://localhost:8100/#/asdfasdf) , we should see our 404 route.

现在，如果导航到尚未定义的某些路由( http：// localhost：8100 /＃/ asdfasdf )，则应该看到404路由。

步骤4. IndexRoute和链接 (Step 4. IndexRoute and Links)

Now, let’s add navigation to get us between pages.

现在，让我们添加导航以使我们在页面之间。

To do this, we will be using the <Link> component. <Link> is similar to using an html anchor tag.

为此，我们将使用<Link>组件。 <Link>类似于使用html锚标记。

From the docs:

从文档：

The primary way to allow users to navigate around your application. <Link> will render a fully accessible anchor tag with the proper href.

允许用户在您的应用程序中浏览的主要方式。 <Link>将呈现具有适当href的完全可访问的锚标记。

To do this, let’s first create a Nav component. Our Nav component will contain <Link> components, and will look like this:

为此，我们首先创建一个Nav组件。 我们的Nav组件将包含<Link>组件，如下所示：

const Nav = () => (  <div>    <Link to='/'>Home</Link>     <Link to='/address'>Address</Link>  </div>)

Now we need a way to make our Nav component persistent across all pages. To do this, we will wrap our child routes in a main <Route> component. We will also need to update our Home component, and create a new component called Container:

现在，我们需要一种使Nav组件在所有页面上持久保存的方法。 为此，我们将子路由包装在主<Route>组件中。 我们还需要更新Home组件，并创建一个名为Container的新组件：

Container:

容器：

const Container = (props) => <div>  <Nav />  {props.children}</div>

{props.children} will allow any routes wrapped within this route to be rendered in this component.

{props.children}将允许将此路线中包含的所有路线呈现在此组件中。

Now, let’s rewrite our App component to look like this. We are wrapping our HomePage, Address and NotFound routes inside the new Container route. We are also setting HomePage to be our IndexRoute. That means that when we hit http://localhost:8100, our Home component will render, as it is specified as the index:

现在，让我们重写我们的App组件，使其看起来像这样。 我们将HomePage，Address和NotFound路由包装在新的Container路由内。 我们还将HomePage设置为我们的IndexRoute。 这意味着当我们点击http：// localhost：8100时 ，我们的Home组件将被渲染，因为它被指定为索引：

class App extends Component {  render () {    return (      <Router history={hashHistory}>        <Route path='/' component={Container}>          <IndexRoute component={Home} />          <Route path='/address' component={Address} />          <Route path='*' component={NotFound} />        </Route>      </Router>    )  }}

For reference, our full app.js code should look like this.

作为参考，我们完整的app.js代码应如下所示 。

Now, when we navigate to http://localhost:8100, we should see our Home Component rendered, along with our Nav <Link> components!

现在，当我们导航到http：// localhost：8100时 ，应该看到渲染的Home组件以及Nav <Link>组件！

步骤5.多个子/ IndexRoutes (Step 5. Multiple child / IndexRoutes)

Now, let’s say we want to nest a twitter feed and an Instagram feed in our address component. Let’s create that functionality.

现在，我们要在地址组件中嵌套一个Twitter feed和一个Instagram feed。 让我们创建该功能。

First, let’s rewrite our address route to take two new components: InstagramFeed and TwitterFeed:

首先，让我们重写地址路由，以添加两个新组件：InstagramFeed和TwitterFeed：

class App extends Component {  render () {    return (      <Router history={hashHistory}>        <Route path='/' component={Container}>          <IndexRoute component={Home} />          <Route path='address' component={Address}>            <IndexRoute component={TwitterFeed} />            <Route path='instagram' component={Instagram} />          </Route>          <Route path='*' component={NotFound} />        </Route>      </Router>    )  }}

We’ve set the IndexRoute of address to be TwitterFeed, and have added the Instagram route there as well.

我们将地址的IndexRoute设置为TwitterFeed，并在其中添加了Instagram路由。

Now, let’s create our InstagramFeed and TwitterFeed components. These will be very basic just so we know we’ve hit the correct routes:

现在，让我们创建我们的InstagramFeed和TwitterFeed组件。 这些将是非常基本的，所以我们知道我们已经找到了正确的路线：

const Instagram = () => <h3>Instagram Feed</h3>const TwitterFeed = () => <h3>Twitter Feed</h3>

Finally, go into the Address component, and add the Links to the new components as well as props.children, so the components will be rendered:

最后，进入“地址”组件，并将“链接”添加到新组件以及props.children中，以便呈现这些组件：

const Address = (props) => <div>  <br />  <Link to='/address'>Twitter Feed</Link>   <Link to='/address/instagram'>Instagram Feed</Link>  <h1>We are located at 555 Jackson St.</h1>  {props.children}</div>

Now, when we navigate to http://localhost:8100/#/address, the address component should be rendered as well as the TwitterFeed component:

现在，当我们导航到http：// localhost：8100 /＃/ address时 ，应该呈现地址组件以及TwitterFeed组件：

For reference, the code up to now should look like this.

作为参考，到目前为止的代码应如下所示 。

第6步。activeStyle / activeClassName和IndexLink (Step 6. activeStyle / activeClassName and IndexLink)

We will now look at how to style to a Link based on whether the route is active. There are two main ways to do this, either adding style directly or through a class.

现在，我们将基于路径是否处于活动状态来研究如何为链接设置样式。 有两种主要方法可以做到这一点，直接添加样式或通过类添加样式。

From the docs:

从文档：

<Link> can know when the route it links to is active and automatically apply an activeClassName and/or activeStyle when given either prop. The <Link> will be active if the current route is either the linked route or any descendant of the linked route. To have the link be active only on the exact linked route, use <IndexLink> instead or set theonlyActiveOnIndex prop.

<Link>可以知道它链接到的路由何时处于活动状态，并在给出任何一个道具时自动应用activeClassName和/或activeStyle。 如果当前路径是链接路径或连接路径的任何后代，则<Link>将处于活动状态。 要使链接仅在确切的链接路由上处于活动状态，请改用 <IndexLink>或设置theonlyA ctiveOnIndex属性。

First, let’s look at activeStyle. To apply activeStyle, you simply add activeStyle as a property to a <Link> and pass in the styling you would like the <Link> to have:

首先，让我们看一下activeStyle。 要应用activeStyle，只需将activeStyle作为属性添加到<Link>中，然后传递您希望<Link>具有的样式：

<Link activeStyle={{color:'#53acff'}} to=''>Home</Link>

Let’s update our Nav component to implement this:

让我们更新Nav组件以实现此功能：

const Nav = () => (  <div>    <Link activeStyle={{color:'#53acff'}} to='/'>Home</Link>     <Link activeStyle={{color:'#53acff'}} to='/address'>Address</Link>     <Link activeStyle={{color:'#53acff'}} to='/about'>About</Link>  </div>)

Now, let’s take a look at how this looks in our browser. You may notice that when you click on address, that Home is still highlighted:

现在，让我们看一下它在浏览器中的外观。 您可能会注意到，当您单击地址时，主页仍然突出显示：

This is because when using <Link> along with activeStyle, the <Link> will be active if the current route is either the linked route or any descendant of the linked route.

这是因为，当将<Link>与activeStyle一起使用时，如果当前路由是有符号路由或该有符号路由的任何后代 ，则<Link>将处于活动状态。

This means that because Address is a descendent of Home, it stays highlighted. To fix this, we can pass the onlyActiveOnIndex property to our Link component:

这意味着，由于Address是Home的后代，因此它将保持突出显示状态。 要解决此问题，我们可以将onlyActiveOnIndex属性传递给我们的Link组件：

<Link onlyActiveOnIndex activeStyle={{color:'#53acff'}} to='/'>Home</Link>

Now, when we look at our browser, the link will only be highlighted if we are on the exact link:

现在，当我们查看浏览器时，仅当我们在确切的链接上时，该链接才会突出显示：

There is also a sibling component of <Link> called <IndexLink>. <IndexLink> that is only active when the current route is exactly the linked route.

<Link>的同级组件也称为<IndexLink>。 <IndexLink>，仅当当前路径正好是链接路径时才激活。

From the docs:

从文档：

An <IndexLink> is like a <Link>, except it is only active when the current route is exactly the linked route. It is equivalent to<Link> with the onlyActiveOnIndex prop set.

<IndexLink> 与 <Link>相似，只是它仅在当前路由恰好是链接路由时才处于活动状态。 它等效于具有onlyActiveOnIndex属性集的<Link>。

To implement this, first bring in <IndexLink> from react-router:

要实现这一点，首先从react-router引入<IndexLink>：

import { ..., IndexLink } from 'react-router'

Now, simply replace the <Link> components in nav with <IndexLink> components:

现在，只需用<IndexLink>组件替换nav中的<Link>组件：

const Nav = () => (  <div>    <IndexLink activeStyle={{color:'#53acff'}} to='/'>Home</IndexLink>     <IndexLink activeStyle={{color:'#53acff'}} to='/address'>Address</IndexLink>     <IndexLink activeStyle={{color:'#53acff'}} to='/about'>About</IndexLink>  </div>)

Now, how about adding classes vs styles? To do this, we can use activeClassName. Let’s set up an active style in our index.html:

现在，如何添加类与样式？ 为此，我们可以使用activeClassName。 让我们在index.html中设置一个活动样式：

<style>  .active {   color:#53acff  }</style>

Now, we’ll replace activeStyle with activeClassName in our Nav component:

现在，我们将在Nav组件中将activeStyle替换为activeClassName：

const Nav = () => (  <div>    <IndexLink activeClassName='active' to='/'>Home</IndexLink>     <IndexLink activeClassName='active' to='/address'>Address</IndexLink>     <IndexLink activeClassName='active' to='/about'>About</IndexLink>  </div>)

For reference, our code should now look like this.

供参考，我们的代码现在应如下所示 。

步骤7.命名组件 (Step 7. Named Components)

Using Named Components, we can specify component as props to a <Route>.

使用命名组件，我们可以将组件指定为<Route>的道具。

From the docs:

从文档：

When a route has one or more named components, the child elements are available by name on this.props. In this case this.props.children will be undefined. All route components can participate in the nesting.

当路由具有一个或多个命名组件时，子元素可通过this.props上的名称使用。 在这种情况下，this.props.children将是未定义的。 所有路线组件都可以参与嵌套。

Let’s now dig into the code and see how this would actually look.

现在，让我们深入研究代码，看看它的实际外观。

First, let’s create a new Component that will be rendering our Named Components. These components will be available as props:

首先，让我们创建一个将渲染命名组件的新组件。 这些组件将作为道具提供：

const NamedComponents = (props) => (  <div>    {props.title}<br />    {props.subTitle}  </div>)

Next, let’s create two new components called Title and Subtitle:

接下来，让我们创建两个名为Title和Subtitle的新组件：

const Title = () => (  <h1>Hello from Title Component</h1>)const SubTitle = () => (  <h1>Hello from SubTitle Component</h1>)

Now, let’s create a new route for our NamedComponents component, and define the Title and Subtitle components in the IndexRoute:

现在，让我们为NamedComponents组件创建一个新路由，并在IndexRoute中定义Title和Subtitle组件：

<Route path='/namedComponent' component={NamedComponents}>  <IndexRoute components={{ title: Title, subTitle: SubTitle }} /></Route>

Finally, let’s add a link to our nav to navigate to this component:

最后，让我们添加到导航的链接以导航到该组件：

<IndexLink activeClassName='active' to='/namedComponent'>Named Components</IndexLink>

Now, we should see our new Named Components link when we look at our browser, and when clicking on the link we should see our Title and SubTitle components rendering on the screen:

现在，当我们查看浏览器时，我们应该看到新的“命名组件”链接，单击链接时，我们应该在屏幕上看到“标题”和“子标题”组件的渲染：

For reference, our code should now look like this.

供参考，我们的代码现在应如下所示 。

步骤8.路由参数 (Step 8. Route Parameters)

An essential part of many applications is the ability to read route parameters from a url.

许多应用程序的基本组成部分是能够从url读取路由参数的功能。

To implement this, let’s revisit our About component. First, let’s rewrite the path in our Router to take an optional parameter, we’ll call it name:

为了实现这一点，让我们重新访问About组件。 首先，让我们在路由器中重写路径以采用可选参数，我们将其命名为：

<Route path='/about/:name' component={About} />

Now, let’s rewrite our About component to use this name variable:

现在，让我们重写About组件以使用此名称变量：

const About = (props) => (  <div>    <h3>Welcome to the About Page</h3>    <h2>{props.params.name}</h2>  </div>)

Now, if we visit http://localhost:8100/#/about/nader we will see my name displayed below “Welcome to the About Page”.

现在，如果我们访问http：// localhost：8100 /＃/ about / nader，我们将在“欢迎使用关于页面”下方看到我的名字。

The only issue here is that if we revisit http://localhost:8100/#/about, we get a 404 because there is no name parameter. To fix this, we can make the parameter optional by wrapping it in parenthesis:

这里唯一的问题是，如果我们重新访问http：// localhost：8100 /＃/ about ，则会得到一个404，因为没有名称参数。 为了解决这个问题，我们可以通过将参数包装在括号中来使参数成为可选参数：

<Route path='/about(/:name)' component={About} />

Now, if we visit http://localhost:8100/#/about we no longer get a 404, and can still access the name variable.

现在，如果我们访问http：// localhost：8100 /＃/ about，我们将不再获得404，并且仍然可以访问name变量。

We can also take this one step further by checking to see if props.name is available and displaying some content:

我们还可以通过检查props.name是否可用并显示一些内容来进一步迈出这一步：

{ props.params.name && <h2>Hello, {props.params.name}</h2>}

Now, the content will only be shown if there is a name parameter available.

现在，仅在有名称参数可用时才显示内容。

For reference, our code should now look like this.

供参考，我们的代码现在应如下所示 。

步骤9.查询字符串参数 (Step 9. Query String Parameters)

You can also pass in query strings as props to any component that will be rendered at a specific route, and access these parameters as props.location.query.

您还可以将查询字符串作为prop传递给将在特定路线呈现的任何组件，并以props.location.query的形式访问这些参数。

To see how this works, let’s create a new component called Query, and render a property called props.location.query.message:

为了了解其工作原理，让我们创建一个名为Query的新组件，并渲染一个名为props.location.query.message的属性：

const Query = (props) => (  <h2>{props.location.query.message}</h2>)

Now, let’s set up our new Query Route within the address route we already have created:

现在，让我们在已经创建的地址路由中设置新的查询路由：

...<Route path='/address' component={Address}>  <IndexRoute component={TwitterFeed} />  <Route path='instagram' component={Instagram} />  <Route path='query' component={Query} /></Route>...

Finally, let’s link to this route by creating a new Link component, and passing in a query string called message and giving it a value. This is done in the ‘to’ property that we have already used.

最后，通过创建一个新的Link组件，并传递一个名为message的查询字符串并为其提供值，来链接到此路由。 这是在我们已经使用的“ to”属性中完成的。

Instead of passing a link to ‘to’, we instead pass in an object the the pathname and query properties defined:

而不是传递到“ to”的链接，我们传递的是定义了路径名和查询属性的对象：

<IndexLink   activeClassName='active'   to={{     pathname: '/address/query',     query: { message: 'Hello from Route Query' }   }}>Route Query</IndexLink>

Now, if we click on our Route Query link, we should see our message rendered on the screen:

现在，如果单击“路线查询”链接，我们应该在屏幕上看到呈现的消息：

For reference, our code should now look like this.

供参考，我们的代码现在应如下所示 。

That covers many basic use cases for getting started with React Router.

这涵盖了React Router入门的许多基本用例。

My Name is Nader Dabit . I am a developer at School Status where we help educators make smart instructional decisions by providing all their data in one place. Check us out @schoolstatusapp.

我叫Nader Dabit 。 我是School Status的一名开发人员，我们在一个地方提供所有数据，帮助教育工作者做出明智的教学决策。 检查我们@schoolstatusapp。

If you like React and React Native, checkout out our podcast — React Native Radio on Devchat.tv

如果您喜欢React和React Native，请查看我们的播客-Devchat.tv上的React Native Radio

If you enjoyed this article, please recommend and share it! Thanks for your time

如果您喜欢这篇文章，请推荐并分享！ 谢谢你的时间

翻译自: https://www.freecodecamp.org/news/beginner-s-guide-to-react-router-53094349669/

React Router入门指南相关推荐

  1. hitchhiker部署_Hitchhiker的React Router v4指南：无限远的递归路径！

    hitchhiker部署 Welcome to the third part of the Hitchhiker's Guide to React Router v4. In this article ...

  2. hitchhiker部署_《 Hitchhiker的React Router v4指南》：路由配置的隐藏值

    hitchhiker部署 Welcome to the Hitchhiker's Guide to React Router v4, Part IV! 欢迎来到< React Router v4 ...

  3. hitchhiker部署_Hitchhiker的React Router v4指南：20分钟内完成Grok React Router

    hitchhiker部署 Hi fellow React Hitchhiker! Want a ride into React Router? Jump in. Let's go! 大家好,React ...

  4. hitchhiker部署_Hitchhiker的React Router v4指南：[比赛，位置，历史] –您最好的朋友！...

    hitchhiker部署 嘿! 欢迎来到< React Router v4旅行者指南>,第二部分! (Hey! Welcome to the Hitchhiker's Guide to R ...

  5. React Mixins入门指南

    对于很多初级的前端工程师对mixins的概念并不是很了解,也没有在React中尝试使用过Mixins,这边文章基本会按照Mixins的作用.用途.原理等多个方面介绍React中Mixins的使用. 首 ...

  6. react 学习入门指南

    在学习react 之前我们需要知道的JavaScript前置知识 变量 箭头函数 使用拓展运算符处理对象和数组 对象和数组的解构 模板字符串 回调函数 es模块化 你不需要成为专家,但是希望您能对以上 ...

  7. 关于React Router v4的虚张声势指南

    In this article, we'll cover the important things you can quickly learn to be informed and confident ...

  8. Flux快速入门指南

    翻译自 http://www.jackcallister.com/2015/02/26/the-flux-quick-start-guide.html 2015年2月26日 本文将概述如何使用Flux ...

  9. Android之React native的介绍和入门指南

    链接:http://zhuanlan.zhihu.com/FrontendMagazine/19996445 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允 ...

最新文章

  1. phpstorm 点击方法跳转 后 返回 原来的位置
  2. 左神算法基础班3_13深度拷贝含有随机指针的链表
  3. HDU 2159 FATE【二维完全背包】
  4. bootstrap5
  5. [线程池] ------ 形象的描述线程池，用一个特好记的例子来记忆
  6. IBM DB2 Intelligent for Data/Text Version 6
  7. Apache CXF实战之七 使用Web Service传输文件
  8. 怎样给 ActiveX 控件签名并打包发布
  9. Python办公自动化（八）｜使用Python转换PDF，Word/Excel/PPT/md/HTML都能转
  10. 《Python分布式计算》第2章 异步编程 （Distributed Computing with Python）
  11. 20190324每日一句：生活中的困难使我更加强大​​​​​​​
  12. AD7124源码 兼容AD7124-4/8 代码都经过验证 有验证的项目PCB图
  13. IE-LAB网络实验室：华为认证 北京华为认证，思科ccie，sp ccie 思科ccnp CCNP需要学习多长时间
  14. Stephen R.Covey《高效人士的7个习惯》
  15. 三维建筑动画让你看懂真实的设计图
  16. xmarks恢复使用
  17. 202102-一个小屁民的若有所思
  18. 基于全数字摄影测量工作站制作DOM简介
  19. html 倒计时特效,JS节日倒计时特效(精确到毫秒)
  20. Python实现各种加密，接口加解密不说难

热门文章

  1. 非空验证 win窗体控件
  2. django-行对向的反向查找
  3. Nginx设置Laravel项目中图片防盗链以及禁止地址栏直接访问图片
  4. PostgreSQL备份还原
  5. (7)Microsoft office Word 2013版本操作入门_常用技巧
  6. L2-011. 玩转二叉树
  7. Git 相关使用命令
  8. 一张图看完成都云栖大会的精彩，请用心感受！
  9. html简单跨行跨列表格制作
  10. 云在天之南——我的七天七夜(率性苍山洱海)