如何在React中处理路由

最新推荐文章于 2024-05-26 20:13:32 发布

cunjie3951

最新推荐文章于 2024-05-26 20:13:32 发布

阅读量798

点赞数

文章标签： react vue python java html ViewUI

在我的较早的教程之一中，我们了解了如何开始使用React和JSX 。在本教程中，我们将看到如何开始设置和创建React应用程序。我们将重点介绍如何使用react-router在React应用中处理路由。

入门

让我们开始使用Node Package Manager（npm）来启动我们的项目。

mkdir reactRoutingApp
cd reactRoutingApp
npm init

在项目中安装所需的react和react-dom库。

npm install react react-dom --save

我们将为此项目使用webpack模块捆绑器。安装webpack和webpack开发服务器。

npm install webpack webpack-dev-server --save-dev

我们将使用Babel将JSX语法转换为JavaScript。在我们的项目中安装以下babel软件包。

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

webpack-dev-server需要一个配置文件，我们将在其中定义入口文件，输出文件和babel加载器。这是我们的webpack.config.js文件的外观：

module.exports = {
    entry: './app.js',
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            }
        ]
    },
    output: {
        filename: 'bundle.js'
    }
};

接下来，我们将创建app.html ，其中将呈现React应用。

<html>
    <head>
        <title>TutsPlus - React Routing Basic</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

让我们为React应用程序创建入口点文件app.js

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

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

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

如以上代码所示，我们已导入react和react-dom 。我们创建了一个名为App的无状态组件，该组件返回标题。 render函数在app.html页面的app元素内部渲染组件。

让我们启动webpack服务器，应用程序应该正在运行并显示来自组件的消息。

webpack-dev-server

将您的浏览器指向http：// localhost：8080 / app.html ，您应该已运行该应用程序。

创建React视图

现在我们启动并运行我们的React应用程序。首先，为我们的React路由应用程序创建几个视图。为了简单app.js ，我们将在同一个app.js文件中创建所有组件。

让我们在app.js创建一个称为navigation的主要组件。

const Navigation = () => {
    return (
        <section>
            <App />
            <ul>
                <li>{'Home'}</li>
                <li>{'Contact'}</li>
                <li>{'About'}</li>
            </ul>
        </section>
    );
};

在上面的Navigation组件中，我们具有应用程序标题和一个新创建的菜单，用于导航到应用程序的不同屏幕。该组件非常简单，带有基本HTML代码。让我们继续为“联系人”和“关于”创建屏幕。

const About = () => {
    return (
        <section>
            <h2>{'Welcome to About!'}</h2>
        </section>
    );
};

const Contact = () => {
    return (
        <section>
            <h2>{'Welcome to Contact!'}</h2>
        </section>
    );
};

我们刚刚创建了一个组件来呈现“ About和“ Contact屏幕。

使用react-router连接视图

为了连接不同的视图，我们将使用react-router 。使用npm安装react-router 。

npm install react-router --save

从app.js react-router导入所需的库。

import {Link, Route, Router} from 'react-router';

我们将为应用程序定义不同的路由，而不是指定要呈现的组件。为此，我们将使用react-router 。

让我们为“主页”屏幕，“联系人”屏幕和“关于”屏幕定义路线。

render(
    <Router>
        <Route
            component={Navigation}
            path="/"
        />
        <Route
            component={About}
            path="/about"
        />
        <Route
            component={Contact}
            path="/contact"
        />
    </Router>,
    document.getElementById('app')
);

当用户访问/路线时，将呈现“ Navigation组件，访问/about将呈现“ About组件，而/contact呈现“ Contact组件。

修改“ About和“ Contact屏幕，以包括指向主屏幕的链接。对于链接屏幕，我们将使用Link ，它的工作方式与HTML锚标记相似。

const About = () => {
    return (
        <section>
            <h2>{'Welcome to About!'}</h2>
            <Link to="/">{'Back to Home'}</Link>
        </section>
    );
};

const Contact = () => {
    return (
        <section>
            <h2>{'Welcome to Contact!'}</h2>
            <Link to="/">{'Back to Home'}</Link>
        </section>
    );
};

修改Navigation组件，使其包含从主屏幕到其他屏幕的链接。

const Navigation = () => {
    return (
        <section>
            <App />
            <ul>
                <li>{'Home'}</li>
                <li>
                    <Link to="/contact">{'Contact'}</Link>
                </li>
                <li>
                    <Link to="/about">{'About'}</Link>
                </li>
            </ul>
        </section>
    );
};

保存更改并重新启动webpack服务器。

webpack-dev-server

将浏览器指向http：// localhost：8080 / app.html ，您应该使应用程序以基本路由运行。

包起来

在本教程中，我们看到了如何开始创建React应用程序以及如何使用react-router将不同的组件连接在一起。我们学习了如何定义不同的路由并使用react-router将它们链接在一起。

您是否尝试过使用react-router或任何其他路由库？请在下面的评论中告诉我们您的想法。

该教程的源代码可在GitHub上获得。

翻译自: https://code.tutsplus.com/tutorials/understanding-how-to-handle-routing-in-react--cms-27355

cunjie3951

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何在React中处理路由

在我的较早的教程之一中，我们了解了如何开始使用React和JSX 。在本教程中，我们将看到如何开始设置和创建React应用程序。我们将重点介绍如何使用react-router在React应用中处理路由。入门让我们开始使用Node Package Manager（npm）来启动我们的项目。 mkdir reactRoutingAppcd reactRoutingAppnpm i...
复制链接

扫一扫