quantizor/buttermilk

<div location="[object Object]" params="[object Object]" route="[object Object]"> being rendered into DOM

bitttttten opened this issue · 3 comments

bitttttten commented 
import React from 'react'
import ReactDOM from 'react-dom'
import { Router } from 'buttermilk'
import { loadableReady } from '@loadable/component'

import App from './App'
import routes from './routes'

function Index() {
    return (
        <App>
            <Router routes={routes} />
        </App>
    )
}

ReactDOM.hydrate(<Index />, document.getElementById('root'))

Here is my entry point, and it's strange that this is being rendered into the DOM:

<div location="[object Object]" params="[object Object]" route="[object Object]">..</div>

Screenshot 2019-04-16 at 13 51 50

My routes look like:

import Page from './pages/Page'
import NotFound from './pages/NotFound'

const routes = [
    { path: '/page', render: Page },
    { path: '*', render: NotFound },
]

export default routes

So nothing out of the ordinary.

quantizor commented
bitttttten commented

Hm, what do you mean by spread applying props? I can't see where I am spreading any object 😬

bitttttten commented

A temporary fix is:

function Outer({ children }: HTMLProps<HTMLDivElement>) {
    return children
}

function Index() {
    return (
        <App>
            <Router routes={routes} outerComponent={Outer} />
        </App>
    )
}

as I guess the spreading here is what is causing this.