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

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

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

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

React.js

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

Q&A

解決済

1回答

1567閲覧

LaravelでReact Routeを使わずページ遷移ができない

takeshipo

総合スコア1

Laravel

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

React.js

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

0グッド

0クリップ

投稿2021/03/16 02:32

編集2021/03/16 07:59

前提・実現したいこと

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系は全くの初心者ですので
必要のないコードの記述も含まれていると思いますが
ご容赦いただけると幸いです。

ご回答よろしくお願いたします

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

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

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

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

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

guest

回答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

Lulucom

総合スコア1899

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問