具有React-Router和React-Transition-Group模块的单页React应用程序

本教程将引导您使用react-router和react-transition-group模块创建具有页面过渡动画的多页面React应用程序。

准备React App

安装create-react-app软件包

如果您曾经有过尝试React的机会，那么您可能已经听说过create-react-app软件包，这使得从React开发环境开始非常容易。

在本教程中，我们将使用此包来启动React应用。

因此，首先，请确保您在计算机上安装了Node.js。 它还将为您安装npm。

在您的终端中，运行npm install -g create-react-app 。 这将在您的计算机上全局安装create-react-app 。

完成后，您可以通过输入create-react-app -V来验证它是否在那里。

创建React项目

现在是时候构建我们​​的React项目了。 只需运行create-react-app multi-page-app 。 当然，您可以将任何东西替换成multi-page-app 。

现在， create-react-app将创建一个名为multi-page-app的文件夹。 只需键入cd multi-page-app即可更改目录，然后运行npm start初始化本地服务器。

就这样。 您在本地服务器上运行了一个React应用程序。

现在是时候清理默认文件并准备我们的应用程序了。

在src文件夹中，删除除App.js和index.js所有内容。 然后打开index.js并将内容替换为下面的代码。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

我基本上删除了registerServiceWorker相关行以及import './index.css'; 线。

另外，将您的App.js文件替换为下面的代码。

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">

      </div>
    );
  }
}

export default App;

现在，我们将安装所需的模块。

在您的终端中，键入以下命令以分别安装react-router和react-transition-group模块。

npm install react-router-dom --save

npm install react-transition-group@1.x --save

安装软件包后，可以检查主项目目录中的package.json文件，以验证模块是否包含在依赖项下。

路由器组件

基本上有两个不同的路由器选项： HashRouter和BrowserRouter 。

顾名思义， HashRouter使用散列来跟踪您的链接，它适用于静态服务器。 另一方面，如果您拥有动态服务器，考虑到您的URL更漂亮的事实，使用BrowserRouter是更好的选择。

一旦确定了应该使用的组件， index.js组件添加到index.js文件中。

import { HashRouter } from 'react-router-dom'

接下来的事情是用路由器组件包装我们的<App>组件。

因此，您最终的index.js文件应如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter } from 'react-router-dom'
import App from './App';

ReactDOM.render(<HashRouter><App/></HashRouter>, document.getElementById('root'));

如果您使用的是动态服务器，而更喜欢使用BrowserRouter ，则唯一的区别是导入BrowserRouter并使用它包装<App>组件。

通过包装<App>组件，我们将历史对象提供给我们的应用程序，因此其他react-router组件可以彼此通信。

内部<App />组件

在我们的<App>组件内部，我们将有两个名为<Menu>和<Content> 。 顾名思义，它们将分别保存导航菜单和显示的内容。

在src目录中创建一个名为“ components”的文件夹，然后创建Menu.js和Content.js文件。

Menu.js

让我们填写我们的Menu.js组件。

因为我们不需要状态和生命周期挂钩，所以它将是一个无状态的功能组件。

import React from 'react'

const Menu = () =>{
  return(
    <ul>
      <li>Home</li>
      <li>Works</li>
      <li>About</li>
    </ul>
  )
}

export default Menu

在这里，我们有一个带有<li>标记的<ul>标记，这将成为我们的链接。

现在，将以下行添加到您的菜单组件。

import { Link } from 'react-router-dom'

然后用<Link>组件包装<li>标记的内容。

<Link>组件本质上是一个类似于<a>标记的react-router组件，但是它不会使用新的目标链接重新加载页面。

另外，如果您在CSS中a标签设置样式，则会注意到<Link>组件具有相同的样式。

请注意， <Link>组件有一个更高级的版本，即<NavLink> 。 这为您提供了额外的功能，以便您可以设置活动链接的样式。

现在我们需要定义每个链接的导航位置。 为了这个目的，所述<Link>部件具有to支撑。

import React from 'react'
import { Link } from 'react-router-dom'

const Menu = () =>{
  return(
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/works">Works</Link></li>
      <li><Link to="/about">About</Link></li>
    </ul>
  )
}

export default Menu

Content.js

在我们的<Content>组件中，我们将定义Routes以匹配Links。

我们需要来自react-router-dom的Switch和Route组件。 因此，首先，导入它们。

import { Switch, Route } from 'react-router-dom'

第二，导入我们要路由到的组件。 这些是我们示例中的Home ， Works和About组件。 假设您已经在components文件夹中创建了这些组件，我们还需要导入它们。

import Home from './Home'

import Works from './Works'

import About from './About'

这些组件可以是任何东西。 我只是将它们定义为内容最少的无状态功能组件。 下面是一个示例模板。 您可以将其用于所有三个组件，但不要忘记相应地更改名称。

import React from 'react'

const Home = () =>{
  return(
    <div>
      Home
    </div>
  )
}

export default Home

开关

我们使用<Switch>组件对<Route>组件进行分组。 Switch查找所有路由 ，然后返回第一个匹配的路由 。

路线

路线是与目标path匹配的调用您的目标组件的组件。

我们的Content.js文件的最终版本如下所示：

import React from 'react'
import { Switch, Route } from 'react-router-dom'
import Home from './Home'
import Works from './Works'
import About from './About'

const Content = () =>{
  return(
    <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/works" component={Works}/>
      <Route path="/about" component={About}/>
    </Switch>
  )
}

export default Content

请注意， Home组件（即主目录）需要额外的exact道具。 使用exact强制路线与精确路径名匹配。 如果未使用，则Home组件也将匹配以/开头的其他路径名，并且对于每个链接，它将仅显示Home组件。

现在，当您单击菜单链接时，您的应用程序应该正在切换内容。

动画路线转换

到目前为止，我们已经可以使用路由器系统。 现在，我们将为路径过渡设置动画。 为了实现这一点，我们将使用react-transition-group模块。

我们将为每个组件的安装状态设置动画。 当使用Switch内的Route组件路由不同的组件时，实际上是在相应地安装和卸载不同的组件。

我们将在要设置动画的每个组件中使用react-transition-group 。 因此，每个组件可以具有不同的安装动画。 我将只对所有它们使用一个动画。

例如，让我们使用<Home>组件。

首先，我们需要导入CSSTransitionGroup 。

import { CSSTransitionGroup } from 'react-transition-group'

然后，您需要用它包装内容。

由于我们正在处理组件的安装状态，因此我们启用transitionAppear并为其设置超时。 我们也禁用transitionEnter和transitionLeave ，因为它们仅在组件安装后才有效。 如果计划为组件的任何子代设置动画，则必须使用它们。

最后，添加特定的transitionName以便我们可以在CSS文件中引用它。

import React from 'react'
import { CSSTransitionGroup } from 'react-transition-group'
import '../styles/homeStyle.css'


const Home = () =>{
  return(
  <CSSTransitionGroup
      transitionName="homeTransition"
      transitionAppear={true}
      transitionAppearTimeout={500}
      transitionEnter={false}
      transitionLeave={false}>
      <div>
        Home
      </div>
  </CSSTransitionGroup>
  )
}

export default Home

我们还导入了一个CSS文件，在其中定义CSS过渡。

.homeTransition-appear{
  opacity: 0;
}

.homeTransition-appear.homeTransition-appear-active{
  opacity: 1;
  transition: all .5s ease-in-out;
}

如果刷新页面，则应该看到Home组件的淡入效果。

如果对所有其他路由组件应用相同的过程，则在通过菜单更改内容时，将看到它们的单独动画。

结论

在本教程中，我们介绍了react-router-dom和react-transition-group模块。 但是，这两个模块的功能远远超出了本教程中讨论的范围。 这是涵盖内容的工作演示 。

因此，要了解更多功能，请务必仔细阅读所用模块的文档。

在过去的几年中，React越来越受欢迎。 实际上，我们在市场上有许多商品可供购买，查看，实施等。 如果您正在寻找有关React的其他资源，请随时检查 。

翻译自: https://code.tutsplus.com/tutorials/single-page-react-applications-with-react-router-and-react-transition-group-modules--cms-24507