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の機能を使うとどうしてもエラーがでてきてしまいます。
・もしユーザー管理機能で参考のものがありましたら、教えていただきたいです。
よろしくお願いいたいします。
あなたの回答
tips
プレビュー