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

Question

我不熟悉使用 react-router-dom。当我对我的项目进行 localhost 访问时，localhost:3000 或 localhost:3000/home 都没有呈现任何内容，请参阅 screenshot。我不确定是什么导致了这个问题。

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

login.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

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