#ファイル構造
├── out
│ └── bundle.js
├── package-lock.json
├── package.json
├── src
│ ├── browserRouter.js
│ ├── firstpage
│ │ ├── header.js
│ │ └── index.js
│ │
│ │
│ ├── index.js
│ └── secondpage
│ ├── Hello.js
│ └── index.js
└── webpack.config.js
src/index.js
でbrowserRouter.js
をレンダリングして表示したいです。
#コード
main.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="root"> </div> <script src="out/bundle.js"></script> </body> </html>
src/index.js
import React from 'react' import ReactDOM from 'react-dom' import HelloApp from './browserRouter' import { BrowserRouter as Router } from 'react-router-dom' ReactDOM.render( <Router> <HelloApp /> </Router>, document.getElementById('root') )
src/browserRouter.js
import React from 'react' import {BrowserRouter, Route, Switch} from 'react-router-dom' import header from './firstpage/header' import World from './secondpage/Hello' import Hello from './secondpage/Hello' const HelloApp = () => ( <BrowserRouter> <Switch> <Route exact path='/' component={ Hello } /> <Route path='/firstpage' component={ header } /> <Route path='/secondpage' component={ World } /> </Switch> </BrowserRouter> ) export default HelloApp
現状では真っ白な画面しか表示されなくて困っております
あなたの回答
tips
プレビュー