从零开始学习React-路由react-router配置(四)

简介: 从零开始学习React-路由react-router配置(四)


路由react-router可以实现根组件自动挂载其他不同的子组件,今天写一个路由的配置首先打开github搜索react-router,看一下上面有写好的示例,照葫芦画瓢即可:



具体步骤

1:新建组件


在components文件夹底下新建3个组件页面,用于页面跳转路由的示例:

Home.js

import React, { Component } from 'react';
class Home extends Component {
    constructor(props) {
        super(props);
        //react定义数据
        this.state = {          
        }
    }
    render() {
        return (
            <div>
                <h2>我是Home组件界面</h2>
            </div>
        )
    }
}
export default Home;

New.js

import React, { Component } from 'react';
class News extends Component {
    constructor(props) {
        super(props);
        //react定义数据
        this.state = {
        }
    }
    render() {
        return (
            <div>
                <h2>我是News界面</h2>                           
            </div>
        )
    }
}
export default News;

About.js

import React  from 'react';
class About extends React.Component {
    //构造函数
    constructor(props) {
        super(props);
        //react定义数据
        this.state = {
        }
    }
    render() {
        return (
        <div> 
        <h2>我是About界面</h2>
        </div>
        )
    }
}
export default About;
2:安装路由模块

打开终端,进入项目,输入安装路由模块的命令。

cnpm  install  react-router-dom  --save


3:引入路由模块

安装完成之后,在根组件App.js里面引入路由模块。

import {BrowserRouter as Router,Route,Link} from "react-router-dom";
4:路由代码

复制文档里面的路由配置的代码到根模块App.js里面。

    <Router>
      <div>
          <Route exact path="/" component={Home} />          
          <Route exact path="/news" component={News} />
          <Route exact path="/about" component={About} />
      </div>
    </Router>
5:引入前面面创建的3个组件
import Home from './components/Home';
import About from './components/About';
import News from './components/News';

到这一步的时候,路由配置完成了。

6:页面跳转标签

我们需要写个li标签,将跳转组件的路径写在里面。

<ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/news">News</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
</ul>

好了,现在可以测试一下了


App.js参考代码

import React from 'react';
import {BrowserRouter as Router,Route,Link} from "react-router-dom";
//引入新建的组件
import Home from './components/Home';
import About from './components/About';
import News from './components/News';
function App() {
    return(
        <Router>
      <div>
      <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/news">News</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
        <hr />     
          <Route exact path="/" component={Home} />          
          <Route exact path="/news" component={News} />
          <Route exact path="/about" component={About} />
      </div>
    </Router>
    );
}
export default App;
相关文章
|
3月前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
252 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
1月前
|
前端开发 API UED
React 路由守卫 Guarded Routes
【10月更文挑战第26天】本文介绍了 React 中的路由守卫(Guarded Routes),使用 `react-router-dom` 实现权限验证、登录验证和数据预加载等场景。通过创建 `AuthContext` 管理认证状态,实现 `PrivateRoute` 组件进行路由保护,并在 `App.js` 中使用。文章还讨论了常见问题和易错点,提供了处理异步操作的示例,帮助开发者提升应用的安全性和用户体验。
53 1
|
2月前
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
|
3月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
91 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
3月前
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
42 0
|
1月前
|
前端开发 安全 网络安全
React——路由Route
React——路由Route
35 2
React——路由Route
|
2月前
|
资源调度 前端开发 测试技术
React Router 路由管理
【10月更文挑战第10天】本文介绍了 React Router,一个在 React 应用中管理路由的强大工具。内容涵盖基本概念、安装与使用方法、常见问题及解决方案,如路由嵌套、动态路由和路由守卫等,并提供代码示例。通过学习本文,开发者可以更高效地使用 React Router,提升应用的导航体验和安全性。
320 19
|
1月前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
40 2
|
2月前
|
前端开发 网络架构
React 路由
10月更文挑战第11天
37 2
|
2月前
|
资源调度 前端开发 JavaScript
React进阶学习
React进阶学习
16 1