私は次のように 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 ☞</button>
</form>
)
}
}
export default StorePicker