React-Router学习

Posted 2020-11-27 zdjblog

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;