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

[bitttttten]

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>

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]

Yes those props are provided to the top-level child component, so if you’re just spread applying props in your component they’ll end up in the DOM.

…

On Tue, Apr 16, 2019 at 7:53 AM bitten ***@***.***> wrote: import React from 'react'import ReactDOM from 'react-dom'import { Router } from 'buttermilk'import { loadableReady } from ***@***.***/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> [image: Screenshot 2019-04-16 at 13 51 50] <https://user-images.githubusercontent.com/19930241/56207395-e78cf100-604e-11e9-9d5b-e3aa0eee9e86.png> 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. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#13>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAiy1o3PapQYVwSx9Aih08RSl8C6QQsqks5vhbmngaJpZM4cyDUN> .

[bitttttten]

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

[bitttttten]

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.