react中路由问题注意事项

最新推荐文章于 2025-03-20 15:55:19 发布

原创最新推荐文章于 2025-03-20 15:55:19 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #react中路由问题注意事项

react 专栏收录该内容

97 篇文章

订阅专栏

本文介绍了在React应用中，如何通过withRouter高阶组件来在非直接渲染的组件中获取和使用路由信息，例如实现历史操作history.go(-1)。示例代码展示了在NavHeader组件中，如何通过修改以使用withRouter解决无法访问history的问题。

注意：

默认情况下，只有路由Route直接渲染的组件才能够获取到路由信息（比如：history.go()等），如果需要在其他组件中获取到路由信息可以通过 withRouter 高阶组件获取
在这里插入图片描述

import React from "react";
import "./index.css";
import { Route } from "react-router-dom";
import { TabBar } from "antd-mobile";
// 组件
import Index from "../Index/index";
import List from "../List/index";
import News from "../News/index";
import My from "../My/index";

// 导航栏数据
const tabItems = [
  {
    title: "首页",
    icon: "icon-ind",
    path: "/home",
  },
  {
    title: "找房",
    icon: "icon-findHouse",
    path: "/home/list",
  },
  {
    title: "咨询",
    icon: "icon-infom",
    path: "/home/news",
  },
  {
    title: "我的",
    icon: "icon-my",
    path: "/home/my",
  },
];

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: this.props.location.pathname,
    };
  }
  renderTabItem = () => {
    return tabItems.map((item) => (
      <TabBar.Item
        title={item.title}
        key={item.title}
        icon={<i className={"iconfont " + item.icon} />}
        selectedIcon={<i className={`iconfont ${item.icon}`} />}
        selected={this.state.selectedTab === item.path}
        onPress={() => {
          this.setState({
            selectedTab: item.path,
          });
          this.props.history.push(item.path);
        }}
      ></TabBar.Item>
    ));
  };
  componentDidUpdate (pre) {
    if (pre.location.pathname !== this.props.location.pathname) { 
        this.setState({
          selectedTab: this.props.location.pathname
        })
    }
  
  }
  render() {
    return (
      <div className="home">
        {/* 当路由是/home时，匹配到了home组件，home组件里又匹配到了下面的路由，故展示 */}
        <Route exact path="/home" component={Index}></Route>
        <Route path="/home/list" component={List}></Route>
        <Route path="/home/news" component={News}></Route>
        <Route path="/home/my" component={My}></Route>
        <TabBar tintColor="#21b97a" barTintColor="white" noRenderContent>
          {this.renderTabItem()}
        </TabBar>
      </div>
    );
  }
}
export default Home;

只能在Index等组件中可以直接使用history.go()，但是在Index中使用导入的公共组件，那么是使用不了的。

import React from "react";
import NavHeader from "../../components/NavHeader";
import "./index.css";
class Map extends React.Component {
  // 容器准备好了再进行初始化地图实例
  componentDidMount() {
      // 创建地图实例
      const map = new window.BMap.Map('container')
      // 设置中心点
      const point = new window.BMap.Point(116.404,39.915)
      // 地图初始化，同时设置地图展示级别
      map.centerAndZoom(point, 15);  
  }
  render() {
    return (
      <div className="map">
        <NavHeader>
          地图找房
        </NavHeader>
        <div id="container"></div>
      </div>
    );
  }
}
export default Map;

在这里面是不能使用到history.go(-1)

import React from "react";
import { NavBar} from "antd-mobile";
import './index.css'
export default function NavHeader(props) {
    return (
        <NavBar
        mode="light"
        icon={<i className="iconfont icon-back" />}
        onLeftClick={() => {props.history.go(-1)}}
      >
        {props.children}
      </NavBar>
    )
}

改成如下的，就好

import React from "react";
import { withRouter } from "react-router-dom";
import { NavBar } from "antd-mobile";
import "./index.css";
function NavHeader(props) {
  const defaultHandler = () => { props.history.go(-1)};
  return (
    <NavBar
      mode="light"
      icon={<i className="iconfont icon-back" />}
      onLeftClick={ props.onLeftClick || defaultHandler }
    >
      {props.children}
    </NavBar>
  );
}
// withRouter(NavHeader) 返回值也是一个组件
export default withRouter(NavHeader);