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會報錯

 

main.js文件中

home.js中，是默認頁面

info.js作為動態組件的接收值，通過this.props.match.params.value來接收值