Q&A
> teratailでは.を含めると言語として認められないので.以降の初め一文字を大文字にして表記しています。
そこに書くのはファイル名ではなくて言語名です
#やりたいこと
React Routerを使ってファイル分割されたコードをもとに簡単なルーティングを組み込んだSPAを作りたい（サンプルレベル）
#発生している問題
HelloApp.jsに必要なコンポーネントを記述し、index.jsでcssファイルをインポートしてそれをレンダリングし、webpackで依存関係を解決してビルドし、出来上がったファイルをmain.htmlに読み込ませる、という標準的な作業(あるテキストの写経)をしているのですが、表示されるページは真っ白です。
#コード
teratailでは.を含めると言語として認められないので.以降の初め一文字を大文字にして表記しています。
HelloAppJs
1 2import React from 'react' 3import { 4 BrowserRouter as Router, 5 Route, 6 Link 7} from 'react-router-dom' 8 9//React Routerを使ったメインコンポーネントの定義 10 11const HelloApp = () => ( 12 <Router> 13 <div style={{margin: 20}}> 14 <Route exact path ='/' component={Home} /> 15 <Route path ='/ja' component={HelloJapanese} /> 16 <Route path ='/en' component={HelloEnglish} /> 17 </div> 18 </Router> 19) 20 21//ホーム画面を表すコンポーネントを定義 22 23const Home = () => ( 24 <div> 25 <h1>Hello App</h1> 26 <p>言語を選択してください</p> 27 <ul> 28 <li><a href='/ja'>日本語</a></li> 29 <li><a href='/en'>英語</a></li> 30 </ul> 31 </div> 32) 33 34//日本語画面を表すコンポーネントを定義 35const HelloJapanese = () => ( 36 <div> 37 <h1>こんにちは</h1> 38 <p><a href='/'>戻る</a></p> 39 </div> 40) 41 42//英語画面を表すコンポーネントを定義 43const HelloEnglish = () => ( 44 <div> 45 <h1>Hello</h1> 46 <p><a href='/'>Back</a></p> 47 </div> 48) 49 50export default HelloApp
indexJs
1import React from 'react' 2import ReactDOM from 'react-dom' 3import HelloApp from './HelloApp' 4import './index.css' 5 6ReactDOM.render(<HelloApp/>, document.getElementById("root")) 7
webpackConfigJs
1const path = require('path') 2//returns '/Users/shotaro_okamoto/ProperDocs/programing/React_practice/release' 3// '__dirname' means the directory to which this file belongs 4module.exports = { 5 mode: "production", 6 entry: { 7 filename: path.resolve(__dirname,'./test/Routing/index.js') 8 }, 9 output: { 10 path: path.resolve(__dirname,'./test/Routing'), 11 filename: 'bundle.js' 12 }, 13 module: { 14 rules: [ 15 { 16 test: /.js$/, 17 loader: 'babel-loader', 18 query: { 19 presets: ['@babel/preset-env','@babel/react'] 20 } 21 }, 22 { 23 test: /.css/, 24 use: [ 25 "style-loader", 26 { 27 loader: "css-loader", 28 options: { url: false } 29 } 30 ] 31 } 32 ] 33 } 34}
indexCss
1body { 2 margin: 0; 3 padding: 0; 4 font-family: sans-serif; 5}
mainHtml
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6</head> 7<body> 8 <div id="root"> 9 </div> 10 <script src="bundle.js"></script> 11</body> 12</html>
##Google Chrome の Elements に表示されるhtml
Elements
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style>body { 7 margin: 0; 8 padding: 0; 9 font-famin\ly: sans-serif; 10 } 11 </style> 12</head> 13<body> 14 <div id="root"> 15 <div style="margin: 20px;"></div> 16 </div> 17 <script src="bundle.js"></script> 18</body> 19</html>
#疑問点
なぜcssの設定のみhtmlに取り込まれreactコンポーネントは無視されるのか？
#アクセスしているURL
http://localhost:5000/test/Routing/main
回答1件
0
ベストアンサー
/test/Routing/main に相当する <Route> の設定がないからではないでしょうか。
http://localhost:5000/http://localhost:5000/jahttp://localhost:5000/en
にそれぞれアクセスしたら表示されませんか？
投稿2020/01/09 01:45
総合スコア2982
そうすると表示されるのはserveした時に初めて表示される画面です。/jaなどは404になります。Elementにはcssだけ表示されているのでcomponent周りの問題だと思っているのですが、それがわかりません
cssが適用されているのは、HelloAppコンポーネントは読み込まれていて、divが描画されているということかと思います。その中に何もレンダリングされないのは、divの子要素である<Route>の条件のどれにも、アクセスしているURLがマッチしていないからかと。
https://reacttraining.com/react-router/web/example/no-match こちらのサンプルに従って、no-matchのときのコンポーネントを定義してあげると何かしら表示されるかと思いますが、確認いただけますでしょうか。
なんとなく理解できました。
`<Route exact path='/test/Routing/main' component={Home} />`
のように変更すると表示されました！昨晩からありがとうございます。勉強頑張ります！
/ でアクセスしたときに期待とは違うレンダリング結果になって、 /ja が404になるのは少し謎ですが、糸口がつかめたようで何よりです
あなたの回答
tips
プレビュー
