了解React中的嵌套路由

最新推荐文章于 2024-06-21 10:29:28 发布

cunjie3951

最新推荐文章于 2024-06-21 10:29:28 发布

阅读量1.1k

点赞数

文章标签： vue react babel react native python ViewUI

React是Facebook构建JavaScript库，用于构建用户界面。如果您不熟悉React ，建议您阅读我们有关React入门的较早的教程之一。在本教程中，我们将讨论如何在React Web应用程序中处理嵌套路由。

设置应用

我们将从设置React Web应用程序开始。让我们创建一个名为ReactRouting的项目文件夹。在ReactRouting内部，创建一个名为app.html的文件。以下是app.html文件：

<html>

<head>
    <title>TutsPlus - React Nested Routing</title>
</head>

<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>

</html>

在ReactRouting文件夹中，使用Node Package Manager（npm）初始化项目。

npm init

输入特定于项目的详细信息，或者按Enter作为默认值，您应该在ReactRouting文件夹中包含package.json文件。

{
  "name": "reactroutingapp",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

使用npm安装react和react-dom依赖项。

npm install react react-dom --save

使用npm安装babel软件包并将其保存到package.json文件。

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

需要babel软件包才能将JSX代码转换为JavaScript。创建一个webpack配置文件来处理webpack配置。这是webpack.config.js文件的外观：

module.exports = {
  entry: './app.js',

  output: {
    filename: 'bundle.js',
  },

  module: {
    loaders: [
      { exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
    ]
  }
}

app.js是我们的React代码将驻留的文件。在ReactRouting文件夹中创建一个名为app.js的文件。在app.js导入所需的app.js库。创建一个名为App的组件，该组件的div带有一些文本。使用render方法渲染组件。这是基本的app.js文件的外观：

import React from 'react'
import { render } from 'react-dom'

const App = () => {
    return (
        <h2>{'TutsPlus - Welcome to React Nested Routing App'}</h2>
    );
};

render((
    <App />
    ),document.getElementById('app'))

重新启动webpack开发服务器。

webpack-dev-server

重新启动服务器后，您应该能够查看在http：// localhost：8080 /上运行的React应用程序。

在React中处理路由

我们将使用react-router来实现路由和嵌套路由。首先，在我们的项目中安装react-router 。

npm install react-router --save

现在，我们在项目中安装了react-router 。让我们创建几个视图来实现路由。在app.js文件中，创建两个组件，分别称为view1和view2 。代码如下所示：

const View1 = () => {
    return(
        <h3>{'Welcome to View1'}</h3>
    );
};

const View2 = () => {
    return(
        <h3>{'Welcome to View2'}</h3>
    );
};

创建一个Menu组件，以在单击时显示View1和View2 。外观如下：

const Menu = () => {
    return(
		<section>
           
            <ul>
                <li>{'Home'}</li>
                <li>
                    <Link to="/view1">{'View1'}</Link>
                </li>
                <li>
                    <Link to="/view2">{'View2'}</Link>
                </li>
            </ul>
        </section>
	)
};

让我们使用react路由器显示我们应用程序的默认路由。将Menu组件设置为默认路由。还定义View1和View2组件的路由。外观如下：

render(
    <Router history={hashHistory}>
        <Route component={Menu} path="/"></Route>
        <Route component={View1} path="/view1"></Route>
        <Route component={View2} path="/view2"></Route>
    </Router>,
document.getElementById('app'));

保存以上更改，然后重新启动webpack服务器。您应该在http：// localhost：8080 / webpack-dev-server /中显示垂直导航菜单。

尝试单击View1和View2链接，它应该导航到适当的组件。

React中的嵌套路由

我们已经有一个显示标题文本的App组件。假设我们希望菜单单击显示适当的视图，但是我们希望将其呈现在App组件中。

我们希望导航菜单在所有页面上都可用。为了实现这一点，我们将尝试将View1组件View1和View2嵌套在App组件中。因此，无论何时呈现View1 ，它都将显示在App组件内。

现在，修改路由器配置，并将View1和View2路由配置放置在App组件路由内。

render(
    <Router history={hashHistory}>
        <Route component={App} path="/">
            <Route component={View1} path="/view1"></Route>
            <Route component={View2} path="/view2"></Route>
        </Route>
    </Router>,
document.getElementById('app'));

修改App组件以将Menu组件嵌套在其中。

const App = () => {
    return (
        <div>
            <h2>{'TutsPlus - Welcome to React Nested Routing App'}</h2>
            <Menu />
        </div>
    );
};

为了在App组件内部呈现嵌套路线，我们将props.children添加到App组件。将props作为函数参数传递给App组件。

const App = (props) => {
    return (
        <div>
            <h2>{'TutsPlus - Welcome to React Nested Routing App'}</h2>
            <Menu />
            {props.children}
        </div>
    );
};

让我们还将一个Home组件添加到我们的应用程序中。

const Home = () => {
    return(
        <div>
            <h3>{'Welcome Home !!'}</h3>
        </div>
        
    );
};

在嵌套的路由列表中包括Home组件。

render(
    <Router history={hashHistory}>
        <Route component={App} path="/">
            <Route component={Home} path="/home"></Route>
            <Route component={View1} path="/view1"></Route>
            <Route component={View2} path="/view2"></Route>
        </Route>
    </Router>,
document.getElementById('app'));

保存以上更改并重新启动服务器，您应该能够查看该应用程序。单击列出的菜单项，单击时应将其嵌套在App组件内。

包起来

在本教程中，您了解了如何使用react-router在React应用程序中实现嵌套路由。您可以开发小的独立组件，然后使用这些组件创建更大的应用程序。使小组件组合成大型应用程序成为可能，这使React真正强大。

React正在成为事实上的Web平台之一。这并非没有学习曲线，而且还有很多资源可以使您忙碌。如果您正在寻找其他资源来学习或在工作中使用，请查看Envato市场中可用的资源。

该教程的源代码可在GitHub上获得。在下面的评论中让我们知道您的建议和想法。

翻译自: https://code.tutsplus.com/tutorials/understanding-nested-routing-in-react--cms-27955

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
了解React中的嵌套路由

React是Facebook构建JavaScript库，用于构建用户界面。如果您不熟悉React ，建议您阅读我们有关React入门的较早的教程之一。在本教程中，我们将讨论如何在React Web应用程序中处理嵌套路由。设置应用我们将从设置React Web应用程序开始。让我们创建一个名为ReactRouting的项目文件夹。在ReactRouting内部，创建一个名为app....
复制链接

扫一扫