一种 <Router/> 可能只有一个子元素

Question

Okay, what am I doing wrong, as far as I can see my Router only has one child element -

mY routes.js component is as follows -

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

And my index.js is like so -

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

I'm using the latest version of react router and I have react router dom installed.

Answer 1

While rendering the routes using ReactDOM.render , render it as a React component and not a function invocation. Also to render a component, the JSX tag needs to start with upper case character

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