React DOM / React Router DOM - 项目不渲染

Question

我是使用react-router-dom的新手。当我本地托管我的项目时，不会向本地主机：3000 或本地主机：3000/home渲染任何内容，请参见屏幕截图。我不确定是什么导致了这个问题。

索引.js：

import React from 'react';
import ReactDOM from 'react-dom';
import Login from './login.js'
import Home from './home.js'
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom'
const rounting = (
<Router>
<Route exact path="/" Component={Login} />
<Route path="/home" Component={Home} />
</Router>
)
ReactDOM.render(rounting, document.getElementById('root'));

登录.js：

import React from 'react'
import ReactDom from 'react-dom'
import Home from './home'
import { createHashHistory } from 'history'
import { Redirect, Link, Route, Switch, BrowserRouter as Router, withRouter } from 'react-router-dom'
class Login extends React.Component {
render() {
return (
<div className={styles.App}>
<div>
<p>ABC UNI</p>
<p1>Online Testing</p1>
<h1>LOGIN</h1>
</div>
<div className={styles.inputContainer}>
<input type="text" placeholder="Username" />
<i className="z"></i>
</div>
<div className={styles.inputContainer2}>
<input type="password" placeholder="Password" />
<i class="z"></i>
<button>Sign In</button>
</div>

</div>
)
}
}
export default Login

首页.js：

import React from 'react';
import ReactDOM from 'react-dom';
class Home extends React.Component {
render() {
return (
<button className={styles.button}>this button</button>
)
}
}
export default Home;

提前感谢您的帮助！

Answer 1

路由需要是一个 react 函数/类组件内部，然后像这样渲染：

ReactDOM.render(<App />, document.getElementById('root'));