react动态路由以及获取动态路由

Posted 2021-02-04 smdb

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react动态路由以及获取动态路由相关的知识，希望对你有一定的参考价值。

业务中会遇到点击列表跳转到详情页，

1.在index.js修改我们的跟组件

技术分享图片

新建router2的文件

import React from ‘react‘
import {
  HashRouter as Router,
  Route,
  // Link,
  Switch
} from ‘react-router-dom‘
import Main from ‘./main‘
import Info from ‘./info‘
import About from ‘./../router1/about‘
import Topic from ‘./../router1/topic‘
import Home from ‘./home‘

　　exact是精准匹配有时候会造成路由出不来

export default class IRouter extends React.Component {
render() {
    return ( <Router >
      {/* <Home > */}
      <Switch >
        < Route exact path = "/"
        component = {
          Home
        } /> 
      < Route  path = "/main"
      render = {
        () =>
        < Main >
        <Route path = "/main/:value"
        component = {
          Info
        } > 
        </Route>
        </Main>
      } > </Route> <Route  path = "/about"
      component = {
        About
      } > </Route> <Route exact = {
        true
      }
      path = "/about/abc"
      component = {
        About
      } > </Route> <Route  path = "/topics"
      component = {
        Topic
      } > </Route> 
      </Switch> 
      {/* </Home>  */}
      </Router>
    );
  }
}

　　router后面直接加组件Home会报错

技术分享图片