react動態路由以及獲取動態路由
阿新 • • 發佈:2019-01-18
java image mat param 點擊 http 有時 img index
業務中會遇到點擊列表跳轉到詳情頁,
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來接收值
react動態路由以及獲取動態路由