質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Router

Routerは、異なるネットワーク同士を相互に接続するための通信機器。インターネットでのデータを自動的に振り分け、一つのインターネット回線を複数のコンピュータで使用することが可能です。DHCPによりIPアドレスを自動的に割振りすることもできます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

バージョン管理

バージョン管理はコンピューター上にファイルとして格納されているドキュメント・プログラム・その他の情報の変更履歴等を管理するものです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

1043閲覧

React&laravelでユーザー認証をしたい

songman

総合スコア0

Router

Routerは、異なるネットワーク同士を相互に接続するための通信機器。インターネットでのデータを自動的に振り分け、一つのインターネット回線を複数のコンピュータで使用することが可能です。DHCPによりIPアドレスを自動的に割振りすることもできます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

バージョン管理

バージョン管理はコンピューター上にファイルとして格納されているドキュメント・プログラム・その他の情報の変更履歴等を管理するものです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/11/29 00:05

編集2021/11/30 01:54

React&laravelでユーザー認証をしたい

laravel&Reactでユーザー管理機能の実装をしたいとおもっております。
Reactのコンポーネントなどは作成したのですが、React-Routeの導入をするとうまく表示がされません。
解決策が見つからず、停滞してしまったので、知見を貸していただきたいです。

React-Routeの機能を実装中下記のようなエラーに遭遇しました。

発生している問題・エラーメッセージ

app.js:136369 Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') at Router (app.js:136369) at renderWithHooks (app.js:120826) at mountIndeterminateComponent (app.js:123652) at beginWork (app.js:124890) at HTMLUnknownElement.callCallback (app.js:109786) at Object.invokeGuardedCallbackDev (app.js:109835) at invokeGuardedCallback (app.js:109897) at beginWork$1 (app.js:129800) at performUnitOfWork (app.js:128612) at workLoopSync (app.js:128543)

###route/index.js

import React from 'react' import { Route, Switch, Redirect } from 'react-router-dom' import NavBar from '../components/NavBar' import CardTemplate from '../components/CardTemplate' import PropTypes from 'prop-types' import { connect } from 'react-redux' import { setSession } from '../actions/authentications' const routes = (session)=> { return( <> <NavBar /> <div className="py-3"> {(()=>{ if(session.id===undefined){ return ( <Switch> <Route exact path="/login" render={() => <CardTemplate title="Login" content="LoginForm" />} /> <Route exact path="/register" render={() => <CardTemplate title="Register" content="RegisterForm" />} /> <Route exact path="/password/reset" render={() => <CardTemplate title="Reset Password" content="EMailForm" />} /> <Route path="/password/reset/:id" render={(props) => <CardTemplate title="Reset Password" content="ResetForm" params={props.match.params} />} /> <Redirect to="/login" /> </Switch> ) } else { if(session.email_verified_at===null) { return ( <Switch> <Route exact path="/email/verify" render={() => <CardTemplate title="Verify Your Email Address" content="Verify" />} /> <Redirect to="/email/verify" /> </Switch> ) } else { return ( <Switch> <Route exact path="/" render={() => <CardTemplate title="Welcome" content="Welcome" />} /> <Route path="/home" render={() => <CardTemplate title="Dashboard" content="Home" />} /> <Redirect to="/home" /> </Switch> ) } } })()} </div> </> ) } export default routes

app.js

require('./bootstrap'); import { Provider } from 'react-redux' import React from 'react' import ReactDOM from 'react-dom' import ReactRoot from './ReactRoot' import configureStore, { history } from './stores/configureStore' import { persistStore } from 'redux-persist' import { PersistGate } from 'redux-persist/integration/react' const store = configureStore() const pstore = persistStore(store) const render = (props) => { ReactDOM.render( <Provider store={store}> <PersistGate loading={<p>loading...</p>} persistor={pstore}> <ReactRoot history={history} responseSession={props} /> </PersistGate> </Provider>, document.getElementById('react-root') ) } function authSession() { let params = new URLSearchParams(); let url = '/session'; window.axios.post(url,params) .then((response)=>{ render(response.data) }) } authSession() // page単位でコンポーネントの呼び出し require('./routes/index'); require('./pages/Task'); require('./pages/Project'); require('./pages/MyPage'); require('./pages/Example'); require('./pages/PostEdit'); require('./pages/IconLabelTabs'); // require('./pages/SignIn'); // require('./pages/SignUp');

###package.json

{ "private": true, "homepage": "./", "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "@babel/preset-react": "^7.16.0", "axios": "^0.21.4", "bootstrap": "^4.6.1", "connected-react-router": "^6.9.1", "history": "^4.10.1", "jquery": "^3.6", "laravel-mix": "^6.0.39", "lodash": "^4.17.19", "popper.js": "^1.16.1", "postcss": "^8.1.14", "prop-types": "^15.7.2", "react": "^17.0.2", "react-bootstrap": "^2.0.0-rc.1", "react-dom": "^17.0.2", "react-redux": "^7.2.6", "react-router": "^6.0.2", "react-router-dom": "^5.3.0", "redux": "^4.1.2", "redux-persist": "^6.0.0", "resolve-url-loader": "^4.0.0", "sass": "^1.32.11", "sass-loader": "^11.0.1" }, "dependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@material-ui/core": "^4.12.3", "@mui/icons-material": "^5.1.0", "@mui/material": "^5.1.0", "@mui/styled-engine": "^5.1.0", "recharts": "^2.1.6", "styled-components": "^5.3.3" } }

###試したこと
Routeなどのバージョンを再度見直し、React-router-domでV6を使用していたが、他のエラーが発生したので、バージョンを変更しました。

###聞きたいこと
・バージョンの依存関係があるのでしょうか。
・コンポーネントの作成時には問題なく表示されていたのですが、React-Routeの機能を使うとどうしてもエラーがでてきてしまいます。
・もしユーザー管理機能で参考のものがありましたら、教えていただきたいです。

よろしくお願いいたいします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問