个性化阅读
专注于IT技术分析
        找回密码
当前位置：srcmini > 前端 > React > 正文

React路由router作用和用法 – ReactJS实战教程

2019-12-25 16:23:38 分类：React 阅读(1697) 评论(0)

上一章ReactJS实战教程请查看：React使用Fragment

路由是一个过程，在此过程中，用户根据其操作或请求被定向到不同的页面。ReactJS Router主要用于开发单页Web应用程序。React Router用于定义应用程序中的多条路由。当用户在浏览器中输入一个特定的URL时，如果这个URL路径与路由器文件中的任何“路由”匹配，用户将被重定向到这个特定的路由。

React Router是一个构建在React之上的标准库系统，用于使用React路由器包在React应用程序中创建路由。它在浏览器上提供同步URL，其中的数据将显示在web页面上。它维护应用程序的标准结构和行为，主要用于开发单页web应用程序。

React路由的必要性

React Router在单页面应用程序中显示多个视图方面起着重要作用。没有React Router，就不可能在React应用程序中显示多个视图。大多数社交媒体网站，如Facebook, Instagram使用React Router来渲染多个视图。

React路由安装

React包含三个不同的路由包。这些分别是:

  • react-router：它为React路由器应用程序提供核心路由组件和功能。
  • react-router-native: 用于移动应用程序。
  • react-router-dom: 用于web应用程序设计。

不可能直接在应用程序中安装路由器，要使用react 路由，首先需要在应用程序中安装react-router-dom模块，下面的命令用于安装react路由器dom。

$ npm install react-router-dom --save

React路由中的组件

路由组件有两种:

<BrowserRouter>: 用于处理动态URL。

<HashRouter>: 用于处理静态请求。

例子

步骤1: 在我们的项目中，我们将创建另外两个组件，以及已经存在的App.js。

About.js

import React from 'react'  
class About extends React.Component {  
  render() {  
    return <h1>About</h1>  
  }  
}  
export default About

Contact.js

import React from 'react'  
class Contact extends React.Component {  
  render() {  
    return <h1>Contact</h1>  
  }  
}  
export default Contact

App.js

import React from 'react'  
class App extends React.Component {  
  render() {  
    return (  
      <div>  
        <h1>Home</h1>  
      </div>  
    )  
  }  
}  
export default App

步骤2: 对于路由，打开index.js文件并导入其中的所有三个组件文件。在这里，你需要导入代码：import { Route, Link, BrowserRouter as Router } from ‘react-router-dom’ ，则用于帮助我们实现路由。现在，我们的index.js文件如下所示。

Route是什么？

它用于根据指定的路径定义和渲染组件，它将接受组件并渲染以定义应该渲染什么。

Index.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'  
import './index.css';  
import App from './App';  
import About from './about'  
import Contact from './contact'  
  
const routing = (  
  <Router>  
    <div>  
      <h1>React路由例子</h1>  
      <Route path="/" component={App} />  
      <Route path="/about" component={About} />  
      <Route path="/contact" component={Contact} />  
    </div>  
  </Router>  
)  
ReactDOM.render(routing, document.getElementById('root'));

第三步: 打开命令提示符，去你的项目的位置,然后输入npm start，你会首先得到Home的页面。

现在，如果你在浏览器中手动输入:localhost: 3000/about，你将会看到about组件渲染在屏幕上。

步骤4: 在上面的屏幕中，你可以看到，Home组件仍渲染。因为Home路径是“/”而about路径是/about，因此，你可以观察到斜杠在渲染两个组件的两个路径中都很常见。要禁止这种行为，你需要使用exact属性，可以在下面的例子中看到。

Index.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'  
import './index.css';  
import App from './App';  
import About from './about'  
import Contact from './contact'  
  
const routing = (  
  <Router>  
    <div>  
      <h1>React路由例子</h1>  
      <Route exact path="/" component={App} />  
      <Route path="/about" component={About} />  
      <Route path="/contact" component={Contact} />  
    </div>  
  </Router>  
)  
ReactDOM.render(routing, document.getElementById('root'));

使用链接组件添加导航

有时，我们希望在一个页面上有多个链接。当我们点击某个特定的链接时，它应该加载与该路径相关联的页面，而无需重新加载web页面。为此，我们需要导入index.js文件中的<Link>组件。

什么是< Link>组件?

此组件用于创建允许在不同url上导航的链接，并在不重新加载网页的情况下渲染其内容。

例子

Index.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'  
import './index.css';  
import App from './App';  
import About from './about'  
import Contact from './contact'  
  
const routing = (  
  <Router>  
    <div>  
      <h1>React路由例子</h1>  
      <ul>  
        <li>  
          <Link to="/">Home</Link>  
        </li>  
        <li>  
          <Link to="/about">About</Link>  
        </li>  
        <li>  
          <Link to="/contact">Contact</Link>  
        </li>  
      </ul>  
      <Route exact path="/" component={App} />  
      <Route path="/about" component={About} />  
      <Route path="/contact" component={Contact} />  
    </div>  
  </Router>  
)  
ReactDOM.render(routing, document.getElementById('root'));

添加链接后，你可以看到路由在屏幕上渲染。现在，如果你单击About，你将看到URL正在改变，而About组件正在渲染。

现在，我们需要向链接添加一些样式。因此，当我们点击任何特定的链接时，都可以很容易地识别出哪个链接是活动的。要做到这一点，路由器提供了一个新的伎俩NavLink而不是链接。现在，在index.js文件中，替换Navlink中的Link并添加属性activeStyle，activeStyle属性的意思是当我们点击链接时，它应该有一个特定的样式，这样我们就可以区分哪个是当前活动的。

import React from 'react';  
import ReactDOM from 'react-dom';  
import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom'  
import './index.css';  
import App from './App';  
import About from './about'  
import Contact from './contact'  
  
const routing = (  
  <Router>  
    <div>  
      <h1>React路由例子</h1>  
      <ul>  
        <li>  
          <NavLink to="/" exact activeStyle={  
             {color:'red'}  
          }>Home</NavLink>  
        </li>  
        <li>  
          <NavLink to="/about" exact activeStyle={  
             {color:'green'}  
          }>About</NavLink>  
        </li>  
        <li>  
          <NavLink to="/contact" exact activeStyle={  
             {color:'magenta'}  
          }>Contact</NavLink>  
        </li>  
      </ul>  
      <Route exact path="/" component={App} />  
      <Route path="/about" component={About} />  
      <Route path="/contact" component={Contact} />  
    </div>  
  </Router>  
)  
ReactDOM.render(routing, document.getElementById('root'));

当我们执行上面的程序时，我们会看到下面的屏幕，我们可以看到主链接是红色的，是目前唯一的活动链接。

现在，当我们点击About链接时，它显示的绿色就是当前活动的链接。

<Link>和<NavLink>

Link组件允许在网站上浏览不同的路由，而NavLink组件用于向活动路由添加样式。

反应路由切换Switch

<Switch>组件仅在路径匹配时才用于渲染组件，否则，它将返回not found组件。

要理解这一点，首先，我们需要创建一个notfound组件。

notfound.js

import React from 'react'  
const Notfound = () => <h1>Not found</h1>  
export default Notfound

现在，导入index.js文件中的组件，可以在下面的代码中看到。

Index.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom'  
import './index.css';  
import App from './App';  
import About from './about'  
import Contact from './contact'  
import Notfound from './notfound'  
  
const routing = (  
  <Router>  
    <div>  
      <h1>React路由例子</h1>  
      <ul>  
        <li>  
          <NavLink to="/" exact activeStyle={  
             {color:'red'}  
          }>Home</NavLink>  
        </li>  
        <li>  
          <NavLink to="/about" exact activeStyle={  
             {color:'green'}  
          }>About</NavLink>  
        </li>  
        <li>  
          <NavLink to="/contact" exact activeStyle={  
             {color:'magenta'}  
          }>Contact</NavLink>  
        </li>  
      </ul>  
      <Switch>  
         <Route exact path="/" component={App} />  
         <Route path="/about" component={About} />  
         <Route path="/contact" component={Contact} />  
         <Route component={Notfound} />  
      </Switch>  
    </div>  
  </Router>  
)  
ReactDOM.render(routing, document.getElementById('root'));

如果我们手动输入错误的路径，它将给出not found错误。

React路由重定向<Redirect>

<Redirect>组件用于在应用程序中重定向到另一个路由，以维护旧的url，它可以放置在路由层次结构中的任何位置。

React中的嵌套路由

嵌套路由允许你在应用程序中呈现子路由。在下面的例子中可以理解。

例子

index.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom'  
import './index.css';  
import App from './App';  
import About from './about'  
import Contact from './contact'  
import Notfound from './notfound'  
  
const routing = (  
  <Router>  
    <div>  
      <h1>React路由例子</h1>  
      <ul>  
        <li>  
          <NavLink to="/" exact activeStyle={  
             {color:'red'}  
          }>Home</NavLink>  
        </li>  
        <li>  
          <NavLink to="/about" exact activeStyle={  
             {color:'green'}  
          }>About</NavLink>  
        </li>  
        <li>  
          <NavLink to="/contact" exact activeStyle={  
             {color:'magenta'}  
          }>Contact</NavLink>  
        </li>  
      </ul>  
      <Switch>  
         <Route exact path="/" component={App} />  
         <Route path="/about" component={About} />  
         <Route path="/contact" component={Contact} />  
         <Route component={Notfound} />  
      </Switch>  
    </div>  
  </Router>  
)  
ReactDOM.render(routing, document.getElementById('root'));

在contact.js文件中，我们需要导入React Router组件来实现子路由。

contact.js

import React from 'react'  
import { Route, Link } from 'react-router-dom'  
  
const Contacts = ({ match }) => <p>{match.params.id}</p>  
  
class Contact extends React.Component {  
  render() {  
    const { url } = this.props.match  
    return (  
      <div>  
        <h1>Welcome to Contact Page of SRCMINI</h1>  
        <strong>选择contact Id</strong>  
        <ul>  
          <li>  
            <Link to="/contact/1">Contacts 1 </Link>  
          </li>  
          <li>  
            <Link to="/contact/2">Contacts 2 </Link>  
          </li>  
          <li>  
            <Link to="/contact/3">Contacts 3 </Link>  
          </li>  
          <li>  
            <Link to="/contact/4">Contacts 4 </Link>  
          </li>  
        </ul>  
        <Route path="/contact/:id" component={Contacts} />  
      </div>  
    )  
  }  
}  
export default Contact

React路由器的好处

React路由器的优点如下:

  • 在这种情况下，没有必要手动设置浏览器历史记录。
  • 链接用于导航应用程序中的内部链接，它类似于锚标记。
  • 它使用switch特性进行渲染。
  • 路由器只需要一个子元素。
  • 中指定了每个组件。
赞(0)
未经允许不得转载：srcmini » React路由router作用和用法 – ReactJS实战教程
标签：

相关推荐

评论 抢沙发

评论前必须登录！

 

猜你喜欢

热门标签

网站开发 (2587)WordPress开发 (2055)WordPress主题 (1517)Web开发 (692)主题 (527)数据科学 (444)教程合集 (317)资源合集 (316)函数 (287)页面 (267)python开发 (261)项目示例 (243)WordPress自定义页面 (233)图像 (219)错误 (213)网站 (189)UX设计 (187)Web安全 (179)模板 (178)Web运维 (177)应用程序 (177)WordPress插件 (176)插件 (171)前端开发 (166)算法 (150)woocommerce (149)数据结构 (149)常见问题 (142)设计 (138)原型设计 (138)