在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5/ React-router渲染不出頁面

React-router渲染不出頁面

app.js

import React from 'react'
import ReactDOM from 'react-dom'
import { DatePicker } from 'antd'
import store from './store/index.js';
import { HashRouter as Router, Route, Link } from 'react-router-dom'
import routes from './router/index.js'
import 'antd/dist/antd.css'
import './style/app.css'

ReactDOM.render(
  <Router routes={routes} />
  , document.getElementById('Root')
)

router的index.js

import React from 'react'
import { HashRouter as Router, IndexRoute, Link } from 'react-router-dom'
import Login from '../views/login'

const routes = (
  <Router path="/" component={Login} />
)

export default routes

view的login.js

import React from 'react'
import ReactDOM from 'react-dom'
import '../style/app.css'
import fetch from '../api/fetchIndex.js'

class Login extends React.Component {
  render() {
    return (
     <div>router</div> 
    )
  }
}

export default Login

頁面是空白

回答
編輯回答
青黛色

你的app.js里面的routes 使用方法應(yīng)該有問題 少了很多東西 入門 建議你看看官網(wǎng) 鏈接描述
入門建議你使用 create-react-app

2018年4月9日 01:50
編輯回答
心上人

湊波熱鬧
圖片描述

圖片描述

2018年2月11日 17:40
編輯回答
司令

謝邀！
正確配置：

...
...
import { BrowserRouter as Router, Switch, Route, Redirect} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory'

const history = createBrowserHistory();
const routes = (
    <Router  history={history}>
        <Switch>
            <Route path="/" component={Login} />
            <Redirect from='' to="/" />
        </Switch>
    </Router>
);

clipboard.png
HashRouter 不支持 location.key 和 location.state。另外由于該技術(shù)只是用來支持舊版瀏覽器，因此更推薦大家使用 BrowserRouter。

clipboard.png
只渲染出第一個與當前訪問地址匹配的 <Route> 或 <Redirect>。4.0 機制里不默認匹配第一個符合要求的，為什么？這種設(shè)計允許我們將多個 <Route> 組合到應(yīng)用程序中，例如側(cè)邊欄（sidebars），面包屑 等等。

clipboard.png
<Route> 也許是 RR4 中最重要的組件了。它最基本的職責就是當頁面的訪問地址與 Route 上的 path 匹配時，就渲染出對應(yīng)的 UI 界面。

參考資料官網(wǎng)：https://reacttraining.com/rea...

2017年1月23日 11:08