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

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

1 个答案: