javascript - 一个 只能有一个子元素

Question

好吧，我做错了什么，据我所知，我的路由器只有一个子元素 -

我的routes.js组件如下 -

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom';
import MarketPlace from "./MarketPlace";
import Favourites from "./Favourites";

const routes    = () => {

       return (

            <Router>
                    <div>
                        <Route exact path   = "/"           component = {MarketPlace}/>
                        <Route  path   = "/Favourites"      component = {Favourites}/>
                    </div>
             </Router>

     )
    }

export default routes

我的index.js就像这样 -

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MarketPlace from './MarketPlace';
import registerServiceWorker from './registerServiceWorker';
import { render } from 'react-dom'
import routes from "./routes.js"

ReactDOM.render(routes(), document.getElementById('root'));
registerServiceWorker();

我使用的是最新版本的React Router，并且安装了React Router dom。

Answer 1

使用ReactDOM.render渲染路由时，将其渲染为React组件而不是函数调用。另外，为了渲染组件，JSX 标签需要以大写字符开头

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MarketPlace from './MarketPlace';
import registerServiceWorker from './registerServiceWorker';
import { render } from 'react-dom'
import Routes from "./routes.js"

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