码迷,mamicode.com
首页 > 其他好文 > 详细

React-Router学习

时间:2020-04-13 16:56:13      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:str   erro   function   不同   实现   extends   --   src   rop   

react-router学习

[TOC]

1.react-router入门介绍

新建一个新的react项目,然后安装react-router

npm install react-router-dom --save-dev

在src目录下新建AppRouter目录,新建AppRouter.jsx文件,代码如下,代码实现了一个最简单路由跳转的功能

import React from ‘react‘;
import { BrowserRouter as Router, Route, Link } from ‘react-router-dom‘;


function Index() {
    return <h2>junjuanjuan.com</h2>
}

function List() {
    return <h2>list-page.com</h2>
}


function AppRouter() {
    //通过link定义,通过route跳转到指定path的路由(和link to对应)
    return (
        <Router>
            <ul>
                <li><Link to="/">首页</Link></li>
                <li><Link to="/list/">列表</Link></li>
            </ul>
            <Route path="/" exact component={Index} />
            <Route path="/list/" component={List} />
        </Router>
    )
}

export default AppRouter;

这样就实现了通过不同的li,跳转到不同的页面。

list-page.com

2.react-router精确匹配和页面分离

通过将新建List.jsx和Index.jsx文件,把Index组件和List组件分离开来。

Index.jsx文件内容如下:

import React, { Component } from ‘react‘;

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }

    render() { 
        return <h2>junjuanjuan.com</h2>
    }
}
 
export default Index;

List.jsx文件内容如下:

import React, { Component } from ‘react‘;

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return <h2>list-page.com</h2>
    }
}
 
export default List;

AppRouter.jsx文件内容如下:

import React from ‘react‘;
import { BrowserRouter as Router, Route, Link } from ‘react-router-dom‘;
import Index from ‘./Index‘
import List from ‘./List‘

// function Index() {
//     return <h2>junjuanjuan.com</h2>
// }

// function List() {
//     return <h2>list-page.com</h2>
// }


function AppRouter() {
    //通过link定义,通过route跳转到指定path的路由(和link to对应)
    return (
        <Router>
            <ul>
                <li><Link to="/">首页</Link></li>
                <li><Link to="/list/">列表</Link></li>
            </ul>
            <Route path="/" exact component={Index} />
            <Route path="/list/" component={List} />
        </Router>
    )
}

export default AppRouter;

React-Router学习

标签:str   erro   function   不同   实现   extends   --   src   rop   

原文地址:https://www.cnblogs.com/zdjBlog/p/12692128.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!