Q&A
前提・実現したいこと
webサイトの開発のためLaravel+Reactを使っています。
以前にLaravelで書いたソースコードを流用したいので、
ReactのRouteを使わずに、Laravelでのページ遷移を行おうとしたところ
エラーメッセージは発生しなかったのですが、
ページ遷移をすることができませんでした。
具体的な操作としては、
topページのサインインボタンを押したら、signInページに遷移したいです。
環境
Laravel 7.x php 7.4.16 npm 6.14.11
該当のソースコード
resources/view
top.blade.php
html
1<!DOCTYPE html> 2<html> 3<body> 4 <div id="top"></div> 5 <script src="{{ asset('../js/app.js')}}"></script> 6 </body> 7</html>
signIn.blade.php
html
1<!DOCTYPE html> 2<html> 3<body> 4 <div id="signIn"></div> 5 <script src="{{ asset('../js/app.js')}}"></script> 6 </body> 7</html>
resources/js
app.js
js
1require('./components/Top.js'); 2require('./components/SignIn.js');
resources/js/components
Top.js
js
1 2import {Component} from 'react'; 3import ReactDOM from 'react-dom'; 4import {Button} from '@material-ui/core';//マテリアルuiフレームワークを使っております 5import axios from 'axios'; 6 7 8class TopPage extends Component{ 9 constructor(props){ 10 super(props); 11 this.handleSignIn=this.handleSignIn.bind(this); 12 } 13 14//ボタンを押したらsignInのapiにアクセス 15 handleSignIn(){ 16 axios 17 .get('/api/signIn') 18 .then(response => { 19 console.log('ok'); 20 21 }).catch(error => { 22 console.log(error); 23 }); 24 } 25 26 render(){ 27 return ( 28 <> 29 <Button onClick={()=>this.handleSignIn()}>サインイン</Button> 30 </> 31 ); 32 } 33} 34 35if (document.getElementById('top')) { 36 ReactDOM.render(<Top />, document.getElementById('top')); 37}
SignIn.js
js
1import {Component} from 'react'; 2import ReactDOM from 'react-dom'; 3 4 5class SignIn extends Component{ 6 constructor(props){ 7 super(props); 8 } 9 10 render(){ 11 return ( 12 <> 13 <h1>サインインページ</h1> 14 </> 15 ); 16 } 17} 18 19if (document.getElementById('signIn')) { 20 ReactDOM.render(<SignIn />, document.getElementById('signIn')); 21}
routes
web.php
php
1Route::get('/', function(){return view('top');} )//top.blade.phpを表示
api.php
php
1Route::group(['middleware' => ['api']], function() { 2 Route::get('/signIn', 'SignInController@signIn'); 3});
app/Http/Controllers
SignInControllers.php
php
1class SignInController extends Controller 2{ 3 public function signIn() 4 { 5 return view('signIn'); 6 } 7}
あとがき
web系は全くの初心者ですので
必要のないコードの記述も含まれていると思いますが
ご容赦いただけると幸いです。
ご回答よろしくお願いたします
回答1件
0
ベストアンサー
routes/web.php
php
1Route::get('signIn', 'SignInController@signIn')->name('signin');
上記のようなルートを定義すれば、通常のBladeでは下記のようなリンクから遷移できると思います。
php
1<a href="/signIn">サインイン</a> 2または 3<a href="{{ route('signin') }}">サインイン</a>
Reactのコンポーネントで同様のリンクを作成するとどうでしょうか。
投稿2021/03/16 10:50
総合スコア1899
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。