react 路由

最新推荐文章于 2025-01-23 21:16:58 发布

原创最新推荐文章于 2025-01-23 21:16:58 发布 · 436 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

react 路由专栏收录该内容

1 篇文章

订阅专栏

react 路由小结

路由的基本使用
路由传参
自定义路由
子路由

路由的基本使用

安装：yarn add react-router-dom
导入：import {HashRouter,Link,Route,Switch,Redirect} from 'react-router-dom'

HashRouter：定义哈希路由整体的容器标签。
Link：单个标签，定义路由的链接，通过to属性来定义链接地址。
Route：单个标签，定义组件的容器，通过path定义和Link的to属性对应的地址，component属性定义链接对应的组件。
Switch：多个Route标签外面的标签，如果需要定义404跳转和重定向跳转，需要用此标签包裹Route标签。
Redirect：定义路由重定向，通过from属性定义原始路由，通过to属性定义重定向路由。

注意： 路由是模糊匹配，精确匹配要加exact。

例🌰1： 需求：

在地址栏输入，即切换到对应的页面

import React from 'react';
import ReactDOM from 'react-dom';

// 导入路由相关的组件
import { HashRouter, Route } from 'react-router-dom';

// 定义路由切换的组件
function Page01() {
  return <h1>页面内容一</h1>
}

function Page02() {
  return <h1>页面内容二</h1>
}

function Page03() {
  return <h1>页面内容三</h1>
}

class App extends Component {
  render() {
    return (
      <HashRouter>
        {/* 路由默认是模糊匹配，"/page02" 也匹配"/"，如果希望精确匹配，可以加"exact"关键字 */}
        <Route exact path="/" component={Page01} />
        <Route path="/page02" component={Page02} />
        <Route path="/page03" component={Page03} />
      </HashRouter>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

页面样式：

例🌰2： 需求：

点击Link标签，即切换到对应的页面


import React, { Component } from 'react';
import ReactDOM from 'react-dom';

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

function Page01() {
  return <h1>页面一</h1>
}

function Page02() {
  return <h1>页面二</h1>
}

function Page03() {
  return <h1>页面三</h1>
}

/* 定义一个类组件,继承于 React.Component , 至少有 render 方法 */
class App extends React.Component {

  render() {
    return (
      <HashRouter>
        <Link to="/">跳转到页面一</Link>
        <br />
        <Link to="/page02">跳转到页面二</Link>
        <br />
        <Link to="/page03">跳转到页面三</Link>

        <Route exact path="/" component={Page01} />
        <Route path="/page02" component={Page02} />
        <Route path="/page03" component={Page03} />
      </HashRouter>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

页面样式：

例🌰3： 需求：

点击Link标签，即切换到对应的页面
无效地址，则跳转到404页面。

Route搭配Switch显示404页面。


import React, { Component } from 'react';
import ReactDOM from 'react-dom';

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

function Page01() {
  return <h1>页面一</h1>
}

function Page02() {
  return <h1>页面二</h1>
}

function Page03() {
  return <h1>页面三</h1>
}

function NotFound() {
  return <h1>404页面</h1>
}

/* 定义一个类组件,继承于 React.Component , 至少有 render 方法 */
class App extends React.Component {

  render() {
    return (
      <HashRouter>
        
        <Link to="/">跳转到页面一</Link>
        <br />
        <Link to="/page02">跳转到页面二</Link>
        <br />
        <Link to="/page03">跳转到页面三</Link>

        <Switch >
          <Route exact path="/" component={Page01} />
          <Route path="/page02" component={Page02} />
          <Route path="/page03" component={Page03} />
          {/* 定义404页面的路由，写在最下面 */}
          <Route component={NotFound} />
        </Switch >

      </HashRouter>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

页面样式：

例🌰4： 需求：

点击Link标签，即切换到对应的页面
无效地址，则跳转到404页面
/重定向为/page01

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

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

function Page01() {
  return <h1>页面一</h1>
}

function Page02() {
  return <h1>页面二</h1>
}

function Page03() {
  return <h1>页面三</h1>
}

function NotFound() {
  return <h1>404页面</h1>
}

/* 定义一个类组件,继承于 React.Component , 至少有 render 方法 */
class App extends React.Component {

  render() {
    return (
      <HashRouter>

        <Link to="/page01">跳转到页面一</Link>
        <br />
        <Link to="/page02">跳转到页面二</Link>
        <br />
        <Link to="/page03">跳转到页面三</Link>

        <Switch>
          <Route exact path="/page01" component={Page01} />
          <Route path="/page02" component={Page02} />
          <Route path="/page03" component={Page03} />

          {/* 定义重定向，写在倒数第二位 */}
          <Redirect exact from="/" to="page01" />

          {/* 定义404页面的路由，写在最下面 */}
          <Route component={NotFound} />
        </Switch >

      </HashRouter>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

页面样式：

路由传参

语法：

定义Link标签：

<li><a href="#/page03/detail/1001">新闻标题一</a></li>
// 等同于：
<li><Link to="/page03/detail/1001">新闻标题一</Link></li>

定义Route标签：

<Route path="/path03/detail/:newsid" component={ Detail } />

组件中获取参数的方式：

// 使用props属性获取传递过来的参数：
function() Detail(props){
	// 通过 props.match.params.newsid 来接收传递的参数
	return <p>这是新闻的详细页面，新闻的ID是{ props.match.params.newsid }</p>
}

例🌰子：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

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

function Page01() {
  return <h1>页面一</h1>
}

function Page02() {
  return <h1>页面二</h1>
}

function Page03() {
  return (
    <ul>
      <li><Link to="/page03/detail/1001">新闻标题一</Link></li>
      <li><Link to="/page03/detail/1002">新闻标题二</Link></li>
      <li><Link to="/page03/detail/1003">新闻标题三</Link></li>
    </ul>
  )
}

// 定义新闻详情页对应的
function Detail(props) {
  return <p>这是新闻详情页面,新闻的id值是：{props.match.params.newsid}</p>
}

function NotFound() {
  return <h1>404页面</h1>
}

/* 定义一个类组件,继承于 React.Component , 至少有 render 方法 */
class App extends React.Component {

  render() {
    return (
      <HashRouter>

        <Link to="/page01">跳转到页面一</Link>
        <br />
        <Link to="/page02">跳转到页面二</Link>
        <br />
        <Link to="/page03">跳转到页面三</Link>

        <Switch>
          <Route exact path="/page01" component={Page01} />
          <Route path="/page02" component={Page02} />
          <Route path="/page03" component={Page03} />
          <Route path="/page03/detail:newsid" component={Detail} />

          {/* 定义重定向，写在倒数第二位 */}
          <Redirect exact from="/" to="page01" />

          {/* 定义404页面的路由，写在最下面 */}
          <Route component={NotFound} />
        </Switch >

      </HashRouter>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

页面样式：

自定义路由

作用： 页面导航菜单的样式、路由相互联动。有点像排他思想。
语法：（固定结构）

/**
* @description:自定义路由
* @param {type} label 路由的文字
* @param {type} to 路由
* @param {type} exact 传入的布尔值
* @return: Route
*/
function CustomLink({ label, to, exact }) {
    return (<Route
        path={ to }
        exact={ exact }
        // match 参数是系统传入的，是一个 bool，匹配当前路由，则 true；不匹配当前路由，则 false。
        children={({ match }) => (
            <Link to={ to } className={ match ? 'active' : '' }>{ label }</Link>
        )}
    />)
}

例🌰子：
src/main.css文件：

.active {
    color: red;
    position: relative;
}

.active::before {
    content: '<';
    position: absolute;
    left: 20px;
    top: 14px;
    transform: rotate(90deg);
}

src/index.js 文件：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import './main.css';

// 导入路由相关的组件
import { HashRouter, Route, Link, Switch, Redirect } from 'react-router-dom';

// 定义路由切换的组件
function Page01() {
  return <h1>页面内容一</h1>
}

function Page02() {
  return <h1>页面内容二</h1>
}

function Page03() {
  return (
    <ul>
      <li><Link to="/page03/detail/1001">新闻标题一</Link></li>
      <li><Link to="/page03/detail/1002">新闻标题二</Link></li>
      <li><Link to="/page03/detail/1003">新闻标题三</Link></li>
    </ul>
  )
}

// 定义新闻详情页对应的
function Detail(props) {
  return <p>这是新闻详情页面,新闻的id值是：{props.match.params.newsid}</p>
}

// 定义一个404页面组件
function NotFound() {
  return <h2>亲！你要的页面未找到！</h2>
}

class App extends Component {
  render() {
    return (
      <HashRouter>

        <CustomLink label="页面一" to="/page01" />
        <CustomLink label="页面二" to="/page02" />
        <CustomLink label="页面三" to="/page03" exact={true} />

        <Switch>
          <Route path="/page01" component={Page01} />
          <Route path="/page02" component={Page02} />
          <Route exact path="/page03" component={Page03} />
          <Route path="/page03/detail/:newsid" component={Detail} />

          {/* 定义重定向，它要定义在倒手第二的位置 */}
          <Redirect exact from="/" to="/page01" />

          {/* 定义404页面对应的路由,这个路由要写到最下面 */}
          <Route component={NotFound} />
        </Switch>

      </HashRouter>
    )
  }
}


/**
* @description:自定义路由
* @param {type} label 路由的文字
* @param {type} to 路由
* @param {type} exact 传入的布尔值
* @return: Route
*/
function CustomLink({ label, to, exact }) {
  return <Route
    path={to}
    exact={exact}
    children={({ match }) => (
      <Link to={to} className={match ? 'active' : ''}>{label}</Link>
    )}
  />
}

ReactDOM.render(<App />, document.getElementById('root'));

页面样式：

子路由

react 路由是直接卸载组件中的，所以子路由就可以直接写在跳转的组件中就可以了，这个时候可以不写 HashRouter容器。
有时候，我们还需要在逻辑代码中跳转路由，这个叫编程式导航，跳转的方式如下：

this.props.history.push('/layout');

例🌰子：

src/index.js:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import './main.css';

// 导入路由相关的组件
import { HashRouter, Route, Link } from 'react-router-dom';

//制作后台登录页组件
function Login(props) {
    return (
        <form>
            <h2>用户登录</h2>
            <p>
                <label>用户名：</label>
                <input type="text" />
            </p>
            <p>
                <label>密&nbsp;&nbsp;&nbsp;码：</label>
                <input type="password" />
            </p>
            <p>
                <input type="button" value="登录" onClick={() => props.history.push('/layout')} />
            </p>
        </form>
    )
}

// 定义右侧内容对应的组件
function Content01() {
    return <h2>右侧内容一</h2>
}

function Content02() {
    return <h2>右侧内容二</h2>
}

function Content03() {
    return <h2>右侧内容三</h2>
}


// 后台首页组件
function Layout() {
    return (
        <div>
            <div className="menu">
                <Link to="/layout">菜单一</Link><br /><br />
                <Link to="/layout/con02">菜单二</Link><br /><br />
                <Link to="/layout/con03">菜单三</Link>
            </div>
            <div className="content">
                <Route exact path="/layout" component={Content01} />
                <Route path="/layout/con02" component={Content02} />
                <Route path="/layout/con03" component={Content03} />
            </div>
        </div>
    )
}

class App extends Component {
    render() {
        return (
            <HashRouter>
                <Route exact path="/" component={Login} />
                <Route path="/layout" component={Layout} />
            </HashRouter>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

src/main.css:

a {text-decoration: none;color: #333;}

a:hover {color: red;}

.active {color: red;position: relative;}

.active::before {content: '<';position: absolute;left: 20px;top: 13px;transform: rotate(90deg);}

.menu {position: fixed;left: 0;top: 0;bottom: 0;width: 240px;background-color: #f80;box-sizing: border-box;padding: 20px;}

.content {position: fixed;left: 240px;top: 0;bottom: 0;right: 0;background-color: lightblue;}

.list_con {width: 600px;margin: 50px auto 0;}

.inputtxt {width: 550px;height: 30px;border: 1px solid #ccc;padding: 0px;text-indent: 10px;}

.inputbtn {width: 40px;height: 32px;padding: 0px;border: 1px solid #ccc;}

.list {margin: 0;padding: 0;list-style: none;margin-top: 20px;}

.list li {height: 40px;line-height: 40px;border-bottom: 1px solid #ccc;}

.list li span {float: left;}

.list li b {float: right;text-decoration: none;margin: 0 10px;font-weight: normal;cursor: pointer;}