【工具篇】React-Router5路由使用教程

最新推荐文章于 2025-03-30 09:15:00 发布

置顶 mind_programmonkey

最新推荐文章于 2025-03-30 09:15:00 发布

阅读量2.4k

点赞数 7

分类专栏：工具篇文章标签： react router5用法 react教程 react router

本文链接：https://blog.csdn.net/Mind_programmonkey/article/details/108569707

版权

工具篇专栏收录该内容

17 篇文章

订阅专栏

【工具篇】React-Router5路由使用教程

自我介绍

React-Router作为React体系的一个重要部分，是一个路由库。其可管理URL，实现组件的切换和状态的变换。

又拖更了好久好久了~~
在这里插入图片描述

一、React-Router和React-Router-dom的选择

React-Router

React-router提供了一些router的核心api，包括Router, Route, Switch等，但是它没有提供dom操作进行跳转的api。

React-Router-dom

React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-router-dom。

二、准备react应用

1.建立react应用

npx create-react-app my-app
cd my-app

2.下载react-router-dom

yarn add react-router-dom

3.在vscode中安装插件react-native

三、路由的基本用法

1.效果展示

2.代码结构

REACT-ROUTER-DEMO
- index.js
- src
  - pages
    - react_router_demo1
      - demo.js
      - home.js
      - news.js
      - user.js

a.demo.js

import React from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link
  } from "react-router-dom";
import Home from './home';
import News from './news';
import Users from './user';


class demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <Router>
                <div>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/news">News</Link>
                        </li>
                        <li>
                            <Link to="/users">Users</Link>
                        </li>
                    </ul>
                <hr/>

                    <Route exact path="/">
                        <Home />
                    </Route>
                    <Route path="/news">
                        <News />
                    </Route>
                    <Route path="/users">
                        <Users />
                    </Route>
                </div>
            </Router>
        );
    }
}

export default demo;

b.home.js

import React from 'react';

class home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <div>
                这是主页页面的内容
            </div>
        );
    }
}

export default home;

c.news.js

import React from 'react';

class news extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <div>
                这是新闻页面
            </div>
        );
    }
}

export default news;

d.user.js

import React from 'react';

class user extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <div>
                这是用户页面
            </div>
        );
    }
}

export default user;

e.index.js

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import Demo from './pages/react_router_demo1/demo';

ReactDOM.render(
  <React.StrictMode>
    <Demo />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

四、路由的嵌套用法

1.效果展示

2.代码结构

REACT-ROUTER-DEMO

index.js
src
- pages
  - react_router_demo2
    - Demo.js
    - home.js
    - news.js
    - Newsone.js
    - Newstwo.js
    - route_config.js
    - user.js

a.route_config.js

import Home from './home';
import News from './news';
import Newsone from './Newsone';
import Newstwo from './Newstwo';

import Users from './user';

const routes = [
    {
        path:"/",
        exact:true,
        component:Home
    },
    {
        path:"/news",
        component:News,
        routes:[
            {
                path:"/news/news_1",
                component:Newsone
            },
            {
                path:"/news/news_2",
                component:Newstwo
            }
        ]
    },
    {
        path:"/users",
        component:Users
    }
];


export default routes;

b.news.js

import React from 'react';
import {
    Route,
    Link
  } from "react-router-dom";


class news extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <div>
                <h2>这是新闻页面</h2>
                <ul>
                    <li>
                        <Link to="/news/news_1">news1</Link>
                    </li>
                    <li>
                        <Link to="/news/news_2">news2</Link>
                    </li>
                </ul>
                {
                    this.props.routes.map((value, key) => {
                        return <Route key={key}
                                exact 
                                path={value.path}
                                render={props=>(
                                    <value.component {...props} routes={value.routes} />
                                )}
                            />
                    })
                }
            </div>
        );
    }
}

export default news;

c.Newsone.js

import React from 'react';

class Newsone extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 

         };
    }
    render() {
        return (
            <div>
                新闻1的内容
            </div>
        );
    }
}

export default Newsone;

d.Newstwo.js

import React from 'react';

class Newstwo extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            
         };
    }
    render() {
        return (
            <div>
                新闻2的内容
            </div>
        );
    }
}

export default Newstwo;

e.Demo.js

import React from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link
  } from "react-router-dom";
import routes from './route_config';


class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

          };
    }
    render() {
        return (
            <Router>
                <div>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/news">News</Link>
                        </li>
                        <li>
                            <Link to="/users">Users</Link>
                        </li>
                    </ul>
                <hr/>
                {
                    routes.map((route,key)=>{
                        if(route.exact){
                            return <Route key={key} exact path={route.path} 
                                    render={props=>(
                                        <route.component {...props} routes={route.routes} />
                                    )}
                                />
                        }
                        else{
                            return <Route key={key}  path={route.path} 
                                    render={props=>(
                                        <route.component {...props} routes={route.routes} />
                                    )}
                                />
                        }
                    })
                }
                </div>
            </Router>
        );
    }
}

export default Demo;

f.index.js

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import Demo from './pages/react_router_demo2/Demo';

ReactDOM.render(
  <React.StrictMode>
    <Demo />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

五、React Router URL传值

1.效果展示

2.代码结构

在上述代码的基础上对home.js进行修改，以及route_config.js修改以及添加Info.js文件。

a.route_config.js

对其修改，再添加下列代码

 {
        path:"/Info/:id",
        component:Info
    }

b.home.js

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

class home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <div>
                这是主页页面的内容
                <ul>
                    <li>
                        <Link to="/Info/lcz">路由传值:lcz</Link>
                    </li>
                    <li>
                        <Link to="/Info/zcl">路由传值:zcl</Link>
                    </li>
                </ul>
            </div>
        );
    }
}

export default home;

c.Info.js

import React from 'react';
import {withRouter} from 'react-router-dom'; 

class Info extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  

        };
    }

    componentDidMount(){
        console.log(this.props.match.params.id)
    }

    render() {
        return (
            <div>
                <h3>Info:{this.props.match.params.id}</h3>
            </div>
        );
    }
}

export default Info;

注意：此处用this.props.match.params来取值

六、React Router 404请求配置

在上述的基础上，在Demo.js中添加一个新页面，并添加一个未配置的路由。

1.效果展示

2.代码结构

a.Demo.js

在其中添加一个新的Link。

<li>
	<Link to="/lcz">个人中心</Link>
</li>

并在下方路由上添加一个Switch

                <Switch>
                {
                    routes.map((route,key)=>{
                        if(route.exact){
                            return <Route key={key} exact path={route.path} 
                                    render={props=>(
                                        <route.component {...props} routes={route.routes} />
                                    )}
                                />
                        }
                        else{
                            return <Route key={key}  exact path={route.path} 
                                    render={props=>(
                                        <route.component {...props} routes={route.routes} />
                                    )}
                                />
                        }
                    })
                }
                </Switch>

在route_config.js中追加以下代码

{
        component:NotMatch
    },

并配置好NotMatch.js的页面

import React from 'react';

class NotMatch extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

          };
    }
    render() {
        return (
            <div>
                404
            </div>
        );
    }
}

export default NotMatch;