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

Question

我对使用react-router-dom不熟悉。当我将项目本地化时，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'));