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

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

准备 React 应用程序

安装 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 项目了。跑吧 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使用哈希来跟踪你的链接，它适用于静态服务器。另一方面，如果你有一个动态服务器，那么使用 BrowserRouter是一个更好的选择，因为你的 URL 会更漂亮。

一旦你决定了你应该使用哪一个，就继续将组件添加到你的 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>。顾名思义，它们将分别保存导航菜单和显示的内容。

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

菜单.js

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

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

import React from 'react'

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

export default Menu

这里我们有一个 <ul> 带有标签的 <li>标签，这将是我们的链接。

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

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

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

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

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

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

现在我们需要定义每个链接的导航位置。为此，该 <Link>组件具有一个 to道具。

从“反应”导入反应从 'react-router-dom' 导入 { Link }常量菜单 = () =>{
  返回（
    <ul>
      <li><Link to="/">首页</Link></li>
      <li><Link to="/works">作品</Link></li>
      <li><Link to="/about">关于</Link></li>
    </ul>
  )}导出默认菜单

内容.js

在我们的 组件 <Content>中，我们将定义 路由以匹配链接。

我们需要 react-router-domSwitch中的和 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

请注意，  Homeexact组件需要额外的 prop  ，它是主目录。使用 强制 Route匹配确切的路径名。如果不使用，其他以 开头的路径名 也会被 Home组件匹配，并且对于每个链接，它只会显示 Home组件。exact/

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

动画路线过渡

到目前为止，我们有一个可以工作的路由器系统。现在我们将动画路线转换。为了实现这一点，我们将使用 react-transition-group 模块。

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

我们将 在我们想要动画的每个组件中使用react-transition-group  。因此，您可以为每个组件设置不同的安装动画。我只会为所有这些使用一个动画。

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

首先，我们需要导入 CSSTransitionGroup。

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

然后你需要用它来包装你的内容。

由于我们正在处理组件的安装状态，因此我们 transitionAppear为其启用并设置超时。我们还禁用 transitionEnterand  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模块。但是，这两个模块的内容比我们在本教程中介绍的要多。这是所涵盖内容的 工作演示 。