Reactのルーティング周り、あるいはNginxの設定周りでハマってしまい、調べたのですがピンとくる情報がなかったので、質問させていただきます。
どうかよろしくお願いいたします。。。
前提・実現したいこと
Reactで見た目を作り、react-router-dom
でルーティングするアプリケーションを、webpackでビルドしてNginxで表示するようにしています。
例えば/user/edit
といったパスへのアクセスで、ユーザー編集画面を表示できるようにしたいのですが、現状できません。
/user
や/login
といったパスの深さが1次のものは期待通りのページが表示されますが、/user/edit
のような深さが2次以上のページはうまく表示されません。
コンポーネントのディレクトリ構成は以下のようになっています。
├── src │ ├── App │ │ ├── Footer │ │ │ └── index.jsx │ │ ├── Header │ │ │ └── index.jsx │ │ ├── Home │ │ │ └── index.jsx │ │ ├── Login │ │ │ └── index.jsx │ │ └── User │ │ ├── Confirm │ │ │ └── index.jsx │ │ ├── Edit │ │ │ └── index.jsx │ │ └── index.jsx
react-router-dom"
でルーティングを制御しているsrc/index.jsx
は以下のようになっております。
パスとコンポーネントの対応付は、別で配列でもって、.map()
でそれぞれルーティングを設定しています。
src/index.jsx
1 2const routes = [ 3 { 4 path: "/home", 5 component: Home, 6 name: "ホーム" 7 }, 8 { 9 path: "/user/edit", 10 component: UserEdit, 11 name: "プロフィール編集" 12 }, 13 14(略) 15 16 {routes.map((route, index) => ( 17 <Route 18 exaxt 19 key={index} 20 path={route.path} 21 pageName={route.name} 22 component={route.component} 23 /> 24 ))} 25
Webpackの設定は以下です。
変な設定にはなっていないと思うのですが。。。
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const Dotenv = require("dotenv-webpack"); const src = path.resolve(__dirname, "src"); const dist = path.resolve(__dirname, "dist"); module.exports = { entry: ["@babel/polyfill", src + "/index.jsx"], output: { path: dist, publicPath: "/", filename: "[name]-[hash].bundle.js" }, module: { rules: [ { enforce: "pre", test: /.(js|jsx)$/, exclude: /node_modules/, use: [ { loader: "eslint-loader", options: { formatter: require("eslint/lib/cli-engine/formatters/stylish") } } ] }, { test: /.(js|jsx)$/, exclude: /node_modules/, loader: "babel-loader" }, { test: /.svg$/, use: [ { loader: "babel-loader" }, { loader: "react-svg-loader", options: { jsx: true } } ] } ] }, resolve: { extensions: [".js", ".jsx"] }, plugins: [ new HtmlWebpackPlugin({ template: src + "/public/index.html", publicPath: "/", filename: "index.html" }), new Dotenv({ path: "./.env" }) ] };
Nginxの設定は以下です。
ここも変なことはしていないと思っているのですが、なんとなくtry_files $uri $uri/ /index.html;
のあたりがまずいのかなと思っていたりします。。。
server { listen 80; server_name localhost; location / { root /var/www/html; index index.html; try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } }
発生している問題・エラーメッセージ
エラーメッセージは発生せず、/user/edit
にアクセスすると、Userコンポーネントが表示されてしまいます。(UserEditコンポーネントが表示されてほしい)
どのようにすれば、/user/edit
でUserEditコンポーネントを表示することができるでしょうか?
何卒よろしくお願いいたします。
あなたの回答
tips
プレビュー