React-router渲染不出页面

Question

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

页面是空白

Answer 1

谢邀！
正确配置：

...
...
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>
);

HashRouter 不支持 location.key 和 location.state。另外由于该技术只是用来支持旧版浏览器，因此更推荐大家使用 BrowserRouter。

只渲染出第一个与当前访问地址匹配的 <Route> 或 <Redirect>。4.0 机制里不默认匹配第一个符合要求的，为什么？这种设计允许我们将多个 <Route> 组合到应用程序中，例如侧边栏（sidebars），面包屑 等等。

<Route> 也许是 RR4 中最重要的组件了。它最基本的职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。

参考资料官网：https://reacttraining.com/rea...

Answer 2

你的app.js里面的routes 使用方法应该有问题 少了很多东西 入门 建议你看看官网 链接描述
入门建议你使用 create-react-app

Answer 3

凑波热闹

Answer 4

题主，请问你解决没，我也遇到了这个问题