reactjs - 反应路由器不渲染 JSX 组件

Question

React 路由器没有渲染我的 JSX。它不显示组件的内容。它呈现一个空白页面。

下面是我的根组件：

import React, { Component } from 'react'
import Navbar from './components/Navbar'
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
import Contact from './components/Contact'

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div className="App">
                    <Navbar />
                    <Route path="/Home" Component={Home} />
                    <Route path="/About" Component={About} />
                    <Route path="/Contact" Component={Contact} />
                </div>
            </BrowserRouter>
        )
    }
}

export default App

标签： reactjsreact-router

Answer 1

例如，如果您的域是“site.com”，那么您只有“site.com/Home”、“site.com/About”和“site.com/Contact”的路由，所以当您的路由为空时，什么都不会出现是很正常的。

如果您在所有路由之后添加到根域的路由，则应该显示一些东西而不是什么都没有。

例如，尝试在所有其他路线之后添加它；

<Route path='/' component={Home} exact/>

此外，您的 Route 组件的道具应命名为“组件”而不是“组件”。

我尝试在这里复制您的场景：

当您了解路由时，您可以编辑代码并进行自己的更改。我真的认为您无法看到您的 JSX，因为您的 Route 道具中的第一个大写字母是“组件”而不是“组件”。