react中路由重定向

react中路由重定向

react路由重定向官方文档说明
render 属性：是一个函数prop，用于指定要渲染的内容
Redirect 组件用于实现路由重定向，to 属性指定要跳转到的路由地址

<Route exact path="/home" component={
    
    Index} />

<Route exact path="/" render={
    
    () => <Redirect to="/home" />} />

如下代码逻辑说明：
当进来到页面中是默认路由的时候，就进行一个路由的重定向，重定向到 /home路由
路由是home了那就匹配到Hoem组件。

import {
    
     BrowserRouter as Router, Route, Link,Redirect} from "react-router-dom";
import Home from "./pages/Home";
import CityList from "./pages/CityList";
function App() {
    
    
  return (
    <Router>
      <div className="App">
        {
    
    /* 默认路由，实现路由的重定向 */}
        <Route exact path="/" render={
    
     ()=> <Redirect to="/home"/>}></Route>
        <Route path="/home" component={
    
    Home}></Route>
        <Route path="/citylist" component={
    
    CityList}></Route>
      </div>
    </Router>
  );
}

export default App;

Home组件代码，看路由跳转模块即可。路由是/home,那就接着匹配显示的组件

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>
    ));
  };

  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;