React 路由

最新推荐文章于 2024-11-08 10:10:18 发布

zhangli0421

最新推荐文章于 2024-11-08 10:10:18 发布

阅读量661

点赞数 1

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/zhangli0421/article/details/124454578

本文介绍了如何在React项目中使用`react-router-dom`，从安装、配置BrowserRouter和HashRouter，到定义路由规则、使用Switch解决匹配问题，以及Link、NavLink和Redirect的用法。通过学习，你可以掌握React应用中的路由管理和导航。

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

1.首先下载路由模块(注意版本)

cnpm install react-router-dom@5

2.在入口文件(app.js)中进行引入路由

1、路由方式

<BrowserRouter/> ：h5路由

<HashRouter>：hash路由

2、路由规则

<Route/>：包裹组件

3、理由选项

<Switch/>：解决匹配问题，按照顺序匹配，如果匹配到前面的后面的就不匹配了。

例如：/path和、path/list这样的，按照顺序path/list会匹配导/path，达不到想要的效果，加上exact关键词做到完全匹配，必须完全一样才能匹配到。

4、跳转导航，相当于a标签

<Link/>：跳转页面

<NavLink/>：增强版的Link

5、自动跳转

<Redirect/>：不用点击，执行到这块就自动跳转

import React, { Component } from 'react'
import Home from '../views/Home'
import About from "../views/About"
import User from '../views/User'
import Notfound from '../views/NotFound'
import { HashRouter, Route,Switch,Redirect } from "react-router-dom"
export default class Rindex extends Component {
    render() {
        return (
            <div>

                <HashRouter>
                    <Switch>
                    <Route path='/home' component={Home} />
                    <Route path='/about' component={About} />
                    <Route path="/user/:id" component={User} />
                  
                    {/* 1.重定向路由 Redirect 这是一个模糊的万能匹配*/}
                    {/* <Redirect from='/' to="/home" /> */}
                    {/* 4.精确匹配 exact */}
                    <Redirect from='/' exact  to="/home" />
                    {/* 2.这玩意比较奇怪，是一个模糊匹配 只要遇到/就干到home上去了，接下来我们使用Switch组件解决 */}
                    {/* 3.搞一个有意思的404 ,因为使用switch组件，所以当上面的页面都匹配不到了，就默认notFound组件了*/}
                    <Route  component={Notfound} />
                    </Switch>
                </HashRouter>
            </div>
        )
    }
}

3.可以写一个Tabbar组件，进行跳转

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import "./Tabbar.css"
class Tabbar extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li>
                        {/* <a href="#/">首页</a> */}
                        <NavLink activeClassName='haha' to="/home">首页</NavLink>
                    </li>
                    <li>
                        {/* <a href="#/about">关于我们</a> */}
                        <NavLink  activeClassName='haha'  to="/about">关于我们</NavLink>

                    </li>
                    <li>
                        {/* <a href="#/user">用户信息</a> */}
                        <NavLink activeClassName='haha'  to="/user/10">用户信息</NavLink>
                    </li>
                    <li>
                        {/* <a href="#dianying">电影</a> */}
                        <NavLink activeClassName='haha'  to="/dianying">电影</NavLink>

                    </li>
                </ul>
            </div>
        );
    }
}

export default Tabbar;