• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » React » 正文

如何在React中处理路由

小八狐 • 2年前 (2022-07-21) • React

在我之前的一篇教程中，我们看到了如何开始使用 react 和 jsx。在本教程中，我们将了解如何开始设置和创建 React 应用程序。我们将专注于如何在 React 应用程序中使用react-router.

入门

让我们从使用 node Package Manager (npm) 启动我们的项目开始。

1
2
3
mkdir reactRoutingApp
cd reactRoutingApp
npm init

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

1
npm install react react-dom --save

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

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

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

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
module.exports = {
    entry: './app.js',
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            }
        ]
    },
    output: {
        filename: 'bundle.js'
    }
};

接下来，我们将创建app.htmlReact 应用程序将被渲染的位置。

1
2
3
4
5
6
7
8
9
<html>
    <head>
        <title>TutsPlus - React Routing Basic</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

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

01
02
03
04
05
06
07
08
09
10
11
12
13
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 元素内呈现组件app.html。

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

1
webpack-dev-server

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

创建反应视图

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

让我们创建一个navigation在app.js.

01
02
03
04
05
06
07
08
09
10
11
12
const Navigation = () => {
    return (
        <section>
            <App />
            <ul>
                <li>{'Home'}</li>
                <li>{'Contact'}</li>
                <li>{'About'}</li>
            </ul>
        </section>
    );
};

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
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. react-router使用 npm安装。

1
npm install react-router --save

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

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

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

让我们定义主屏幕、联系人屏幕和关于屏幕的路由。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
render(
    <Router>
        <Route
            component={Navigation}
            path="/"
        />
        <Route
            component={About}
            path="/about"
        />
        <Route
            component={Contact}
            path="/contact"
        />
    </Router>,
    document.getElementById('app')
);

当用户访问/路由时，  组件Navigation被渲染，访问 组件时被渲染，并 渲染 组件。/aboutAbout/contactContact

修改About 和Contact 屏幕以包含返回主屏幕的链接。对于链接屏幕，我们将使用Link，它的工作方式与 HTML 锚标记类似。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
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组件以包含从主屏幕到其他屏幕的链接。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
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服务器。

1
webpack-dev-server

将您的浏览器指向http://localhost:8080/app.html，您应该让应用程序运行并实现基本路由。

把它包起来

在本教程中，我们了解了如何开始创建 React 应用程序并使用react-router. 我们学习了如何定义不同的路由并使用react-router. 



文章目录
  • 入门
  • 创建反应视图
  • 使用 react-router 连接视图
  • 把它包起来

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：如何在React中处理路由
    文章地址：https://www.weixiaolive.com/en/index.php/post/3607.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云