React路由的使用

本文详细介绍了React路由的安装、HashRouter与BrowserRouter的区别、路由的跳转方法以及如何传递参数。通过具体的代码示例,展示了在不同组件中如何配置和使用Route、Link,以及如何在嵌套路由中实现页面间的导航。
摘要由CSDN通过智能技术生成

React路由

1.React路由的安装

在项目命令行中,执行

cnpm install react-router-dom -S

下载到生产环境的依赖中。

在组件中通过对象的解构方式去获取到react-router-dom内置组件,在组件中,按需引入内置组件,在页面中进行使用:

2.React路由内置组件

  • HashRouter表示一个路由的根容器,将来所有的路由相关的东西,都要包裹在HashRouter里面,而且一个网站中,只需要使用一次HashRouter就好了;
  • Route表示一个路由规则,在Route上,有两个比较重要的属性,path,component
  • Link表示一个路由的链接

2.1HashRouter和BrowserRouter的区别;

BrowserRouter:
  原理是H5的history API,IE9及以下不兼容,需要由web server支持,在web client这边window.location.pathname被react router解析,example.com/react/route
  
HashRouter:
  原理是URL的hash,不需要由web server支持,因为它的只有‘/’path需要由web server支持,而#/react/route URL不能被web server读取,在web client这边window,location.hash被react router解析,example.com/#/react/route

3.React路由的跳转

思路:

  • 创建要是用的二级路由

在这里插入图片描述

  • 先引入要是用的模块

在这里插入图片描述

React路由的跳转代码

index.js代码
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App /> , document.getElementById('root'));
App.js代码
import React from 'react'
import Home from './component/Home'
import News from './component/News'
import About from './component/About'
import {HashRouter,Route,Link} from 'react-router-dom'
class App extends React.Component{

    render(){
       
        return (
                // 根容器
                <HashRouter>
                <div>
                    <h1>这是根目录</h1>
                    <hr/>
                    {/* 链接 */}
                   <Link to="/home">首页</Link>&nbsp;&nbsp;
                   <Link to="/news">新闻</Link>&nbsp;&nbsp;
                   <Link to="/about">关于我们</Link>
                    <hr/>
                    {/* 路由规则,Route是配置路由的规则,同时也是一个占位符 */}
                    <Route path="/home" component={Home} /> 
                    <hr/>
                    <Route path="/news" component={News}></Route>
                    <hr/>
                    <Route path="/about" component={About}></Route>

                </div>
                </HashRouter>
        );
    }
}
export default App;
About.js代码内容
import React from 'react';
class About extends React.Component{
    render(){
        return (
            <div>关于我们</div>
        );
    }
}
export default About;
Home.js代码内容
import React from 'react';
class Home extends React.Component{
    render(){
        return (
            <div>首页</div>
        );
    }
}
export default Home;
News.js代码内容
import React from 'react';
class News extends React.Component{
    render(){
        return (
            <div>新闻</div>
        );
    }
}
export default News;

注意

  • Route 组件path地址是以/开头 ,配置component属性,是显示的组件,这个属性不可以大写
  • Route组件可以单双标签使用,单标签需要/结尾,双标签不可以在中间写入别的东西
  • Link to属性的地址也是/开头,Link在页面渲染的是a标签

4.React路由的传值

通过配置路由的地址,在Link跳转时

  • Route path路径后面 /:id (key)
  • Link to 路径后面 /top/10 (value)接收传值:
  • class类组件,this.props.match.params.属性名
  • 函数组件:形参.match.params.属性名

代码实例:

index.js代码
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App /> , document.getElementById('root'));
App.js代码
import React from 'react'
import News from './component/News'
import {HashRouter,Route,Link} from 'react-router-dom'
class App extends React.Component{
    render(){
        return (
                <HashRouter>
                <div>
                    {/* 链接 */}
                   <Link to="/news/top/12.html">新闻</Link>&nbsp;&nbsp;
                    <Route path="/news/:type/:id" exact component={News}></Route>
                </div>
                </HashRouter>
        );
    }
}

export default App;
News.js代码
import React from 'react';
class News extends React.Component{
    constructor(props){
        super();
        this.state = {
            p: props.match.params
        }
    }

    render(){
        return (
            <div>
                 {/* 新闻--{this.props.match.params.type}--{this.props.match.params.id} */}
                 新闻--{this.state.p.type}--{this.state.p.id}
            </div>
        );
    }
}
export default News;

5.React路由的嵌套

嵌套路由:在路由组件中,使用Link, Route,配置子路由,实现跳转,切换;

下面为一级路由,在一级路由Home为路由组件

index.js代码
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App /> , document.getElementById('root'));
App.js代码
import React from 'react';
import {HashRouter,Link,Route} from 'react-router-dom'
import News from './Component/News'
class App extends React.Component{
  render(){
    return(
      <HashRouter>
        <div>
          <Link to='/news'>新闻</Link>&nbsp;&nbsp;
          <br/>
          <Route path='/news' component={News}></Route>
         </div>
      </HashRouter>
    )
  }
}
export default App;

News.js代码代码内容
import React from 'react'
import {Link,Route} from 'react-router-dom';
import Xw from './new/Xw'
class News extends React.Component{
    render(){
        return(
            <div>
            <Link to='/news/xw'>新闻</Link>
            <Route path='/news/xw' component={Xw}></Route>
            </div>
        )
    }
}
export default News;

在Conomponent下在创建一个news文件夹里面生成二级路由Xw.js
在这里插入图片描述

Xw.js代码内容
import React from 'react'
import {Link,Route} from 'react-router-dom';
import Xw from './new/Xw'
class News extends React.Component{
    render(){
        return(
            <div>
            <Link to='/news/xw'>新闻</Link>
            <Route path='/news/xw' component={Xw}></Route>
            </div>
        )
    }
}
export default News;
React Router 是一个为 React 应用程序提供路由功能的第三方包。它可以帮助我们在 React 应用程序中 URL,使得用户能够通过 URL 直接访问到特的页面。 使用 React Router,你需要首先安装它。可以通过以下命令来安装: ``` npm install react-router-dom ``` 然后在应用程序中引入路由相关的组件和方法: ```javascript import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; ``` 其中,`BrowserRouter` 是一个用于包裹整个应用程序的组件。`Switch` 组件用于包裹多个 `Route` 组件,用于匹配 URL 和组件。`Route` 组件用于定义每个 URL 对应的组件,`Link` 组件用于定义每个链接。 下面是一个简单的例子: ```javascript import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; } function Users() { return <h2>Users</h2>; } function App() { return ( <Router> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/users">Users</Link> </li> </ul> </nav> <Switch> <Route path="/about"> <About /> </Route> <Route path="/users"> <Users /> </Route> <Route path="/"> <Home /> </Route> </Switch> </div> </Router> ); } ReactDOM.render(<App />, document.getElementById("root")); ``` 在这个例子中,我们定义了三个组件:`Home`、`About` 和 `Users`。在 `App` 组件中,我们使用 `Router` 包裹整个应用程序,并在组件中引入了三个链接,分别对应 `Home`、`About` 和 `Users` 组件。使用 `Switch` 和 `Route` 组件,我们将每个 URL 映射到相应的组件。 在这个例子中,如果用户访问 `/about`,则显示 `About` 组件;如果用户访问 `/users`,则显示 `Users` 组件;如果用户访问 `/`,则显示 `Home` 组件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值