React-Router学习

Posted zdjblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React-Router学习相关的知识,希望对你有一定的参考价值。

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学习的主要内容,如果未能解决你的问题,请参考以下文章

react-router 学习笔记

react-router3

React-router学习笔记

在 react-router 中创建动态链接列表

我对于react-router路由原理的学习

react-router 4.0 学习笔记