1

私は次のように create-react-app で React Router v4.0.0-alpha.3 を使用しています:

// For react app
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Match, Miss } from 'react-router';

import './css/style.css';
// For electron app ~
import './ReactotronConfig'
import StorePicker from './components/StorePicker'
import App from './components/App'

class NotFound extends React.Component {
  render() {
    return (
      <div>Not Found.</div>
    )
  }
}

const Root = () => {
  return (
    <BrowserRouter>
      <div>
        <Match exactly pattern="/" component={StorePicker} />
        <Match pattern="/store/:storeId" component={App} />
        <Miss component={NotFound} />
      </div>
    </BrowserRouter>
  );
}


render(
  <Root />,
  document.querySelector('#main')
)

これらのエラーが発生しています。

レンダリング メソッド エラー

これをオンラインで引き起こすことがわかった唯一のことは、間違ってインポートしている可能性があることですが、私の知る限り. 明らかに明白な何かを見落としていると確信しています。

アプリと Storepicker のコード:

import React from 'react'
import Header from './Header'
import Order from './Order'
import Inventory from './Inventory'

const App = ({...props}) => (
  <div className='catch-of-the-day'>
    <div className='menu'>
      <Header tagline="Fresh Seafood Market" />
    </div>
    <Order />
    <Inventory />
  </div>
)

export default App

--

import React, {Component} from 'react'

class StorePicker extends Component {
  render() {
    return (
      <form className='store-selector'>
        <h2>Please Enter A Store</h2>
        <input type='text' required placeholder='Store Name'/>
        <button type='submit'>Visit Store ☞&lt;/button>
      </form>
    )
  }
}

export default StorePicker
4

0 に答える 0