react我自己還在摸索學(xué)習(xí)中,今天正好學(xué)習(xí)一下react-router4 嵌套路由的使用方法,順便留著筆記
先直接貼代碼
import React from 'react'; import ReactDOM from 'react-dom'; import { HashRouter as Router, Route, Switch} from 'react-router-dom'; import createBrowserHistory from 'history/createBrowserHistory'; import UserAddPage from './pages/UserAdd/index'; import HomePage from './pages/Home/index'; import HomeLayout from './components/HomeLayout/index'; const hashHistory = createBrowserHistory(); const NoMatch = ({ location }) => ( <div> <h3>無(wú)法匹配 <code>{location.pathname}</code></h3> </div> ) ReactDOM.render(( <Router history={hashHistory}> <div> <HomeLayout>//總會(huì)加載這個(gè)組件,并且下面 swicth 里面的組件會(huì)在它里面 render <Switch> <Route path="/" exact component={HomePage}/> <Route path="/user/add" component={UserAddPage}/> <Route component={NoMatch}/> </Switch> </HomeLayout> </div> </Router> ), document.getElementById('root'));
參考文章:https://stackoverflow.com/questions/42095600/nested-routes-in-v4
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com