从零开始学习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;
相关文章
|
9天前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
21天前
|
前端开发
如何使用react-router v6快速搭建路由?
如何使用react-router v6快速搭建路由?
15 0
|
29天前
|
存储 资源调度 前端开发
React原理 即 React路由基础
React原理 即 React路由基础
44 1
|
1月前
|
移动开发 前端开发 API
第三十二章 React路由组件的简单使用
第三十二章 React路由组件的简单使用
|
1月前
|
存储 前端开发 JavaScript
第三十章 React的路由基本使用
第三十章 React的路由基本使用
|
2月前
|
人工智能 JSON 前端开发
react17+ts 学习
react17+ts 学习
|
29天前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
24 0
|
1天前
|
前端开发 JavaScript
React和Vue实现路由懒加载
React和Vue实现路由懒加载
8 2
|
1天前
|
前端开发 中间件 数据安全/隐私保护
React路由进阶方法
React路由进阶方法
7 1
|
6天前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。