react之旅（八）React路由

最新推荐文章于 2025-06-01 12:14:36 发布

原创最新推荐文章于 2025-06-01 12:14:36 发布 · 197 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

9 篇文章

订阅专栏

本文详细讲解了React Router和React Router DOM的区别，包括安装与基本使用、动态路由配置、GET传值、自动跳转、嵌套路由等核心概念，帮助开发者掌握React应用中的路由管理。

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

一、react-router和react-router-dom的区别

react-router：提供核心的路由组件与函数，不需要直接安装它，安装react-router-dom时会将react-router作为依赖安装
react-router-dom：基于react-router，加入了在浏览器运行环境下的一些功能，如 <Link> <BrowserRouter> 这样的 DOM 类组件

二、使用react-router-dom

可以使用下面命令安装react-router-dom组件：

npm install react-router-dom --save

基本使用如下：

import React from 'react';

import Home from './components/Home';
import News from './components/News';
import Product from './components/Product';

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

function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/">home</Link><br /><br />
        <Link to="/product">product</Link><br /><br />
        <Link to="/news">news</Link><br /><br />
      </div><br /><br /><br /><br /><br />
      <Route exact path="/" component={Home} />
      <Route path="/news" component={News} />
      <Route path="/product" component={Product} />
    </BrowserRouter>
  );
}

export default App;

BrowserRouter：放在路由的最外层，Link和Route都要放在它里面
Route：path配置访问路径，component配置访问组件，exact标识只有完全匹配才会实现路由跳转
Link：to配置跳转路径

二、react动态路由配置

动态路由配置

 <Route path="/product/:productId" component={Product} />

对应的动态路由加载的组件里面获取传值

 this.props.match.params

跳转

<Link to="/product/1345">to Product</Link>

动态路由：路由中的某一级是个参数
取值：this.props.match.params获取到的是动态路由的参数对象

在这里插入图片描述

三、react get传值

路由配置

<Route path="/product" component={Product} />

对应组件获取get传值

this.props.location.search

获取的是一个字符串，需要自己解析
在这里插入图片描述

跳转

<Link to="/product?productid=1345&type=get">to Product</Link>

四、自动跳转

利用Link组件实现跳转需要手动点击，可以利用Redirect实现自动跳转
用法如下：

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

class Home extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            flag: false
        }
    }

    autoJump = () => {
        this.setState({
            flag: true
        })
    }

    render() {

        if(this.state.flag){
            return (
                <Redirect to="/product?productid=1345&type=get"></Redirect>
            )
        }

        return (
            <div>
                home<br />
                <button onClick={this.autoJump}>自动跳转</button><br /><br /><br />
                <Link to="/product?productid=1345&type=get">to Product</Link>
            </div>
        )
    }
}

export default Home;

五、嵌套路由

import React from 'react';

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

import ProductList from './Product/ProductList';
import ProductDetail from './Product/ProductDetail';

class Product extends React.Component{
    constructor(props){
        super(props);
        console.log(this.props.match);
    }


    render() {
        return (
            <div>
                <Link to="/product/productList">productList</Link><br/>
                <Link to="/product/productDetail">ProductDetail</Link><br/>

                <Route path="/product/productList" component={ProductList}/>
                <Route path="/product/productDetail" component={ProductDetail}/>
            </div>
        )
    }
}

export default Product;