react路由基础（Router、Link和Route）

最新推荐文章于 2025-06-12 16:08:43 发布

原创最新推荐文章于 2025-06-12 16:08:43 发布 · 3.2w 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#react #路由 #Router #Link #Route

React Router 4.0版本进行了大量优化，本文介绍如何使用react-router-dom包实现单页面应用路由。主要内容包括Router的概念及其使用方法，Link组件的基本使用及注意事项，以及Route组件的配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Facebook对react进行持续的改进，路由作为其中最重要的一部分，在4.0版本对其进行了大量的优化，总的来说，简单易用！
之前使用react路由的时候，我们引入的是react-router包。
现在改版之后，我们引入的包是react-router-dom包。

改版之后的react-router-dom路由，我们要理解三个概念，Router、Route和Link。

1、Router
Router我们可以把它看做是react路由的一个路由外层盒子，它里面的内容就是我们单页面应用的路由以及路由组件。

使用方式：

import { BrowserRouter as Router } from "react-router-dom";
class Main extends Component{
    render(){
        return(
        <Router>
            <div>
                //otherCoding
            </div>
        </Router>
        )
    }
}

2、Link
Link是react路由中的点击切换到哪一个组件的链接，（这里之所以不说是页面，而是说组件，因为切换到另一个界面只是展示效果，react的本质还是一个单页面应用-single page application）。

基本使用方式：

import { BrowserRouter as Router, Link} from "react-router-dom";
class Main extends Component{
    render(){
        return(
        <Router>
            <div>
                <ul>
                    <li><link to='/'>首页</Link></li>
                    <li><link to='/other'>其他页</Link></li>
                </ul>
            </div>
        </Router>
        )
    }
}

特别说明：第一、Router下面只能包含一个盒子标签，类似这里的div。
第二、Link代表一个链接，在html界面中会解析成a标签。作为一个链接，必须有一个to属性，代表链接地址。这个链接地址是一个相对路径。
第三、Route，是下面要说的组件，有一个path属性和一个组件属性（可以是component、render等等）。

3、Route
Route代表了你的路由界面，path代表路径，component代表路径所对应的界面。

使用方式：

import React,{ Component } from "react";

import { render } from "react-dom";

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

class Home extends Component{
    render(){
        return (
            <div>this a Home page</div>
        )
    }
}
class Other extends Component{
    render(){
        return (
            <div>this a Other page</div>
        )
    }
}
class Main extends Component{

    render(){
        return (
            <Router>
                <div>
                    <ul>
                        <li><Link to="/home">首页</Link></li>
                        <li><Link to="/other">其他页</Link></li>
                    </ul>
                    <Route path="/home" component={Home}/>
                    <Route path="/other" component={Other}/>
                </div>
            </Router>
        )
    }
}

render(<Main />,document.getElementById("root"));