Laravel과 함께 리액트라우터를 사용하는 방법

Laravel과 함께 리액트라우터를 사용하는 방법

사용할 필요가 있다React Router와 함께Laravel프로젝트.

단, 라우터를 작성하면React Router접속을 시도합니다.Laravelprisure Route not exist 오류입니다.

사용방법React Router라라벨 프로젝트 루트를 관리하라고?

render((
    <Router history={browserHistory}>
        <Route path="/" component={App}/>
        <Route path="/profile" component={Profile}/> // this route I trying access
    </Router>
), document.getElementById('root'));

다음과 같이 모든 것을 하나의 컨트롤러에 매핑하는 루트를 작성합니다.

Route::get('/{path?}', [
    'uses' => 'ReactController@show',
    'as' => 'react',
    'where' => ['path' => '.*']
]);

그런 다음 컨트롤러에서 react root 문서가 포함된 HTML 페이지를 표시합니다.

class ReactController extends Controller {
    public function show () {
        return view('react');
    }
}

그런 다음 리액트 라우터를 사용하여 모든 작업을 정상적으로 수행합니다.나한테는 잘 먹히는 것 같아.

---

Larabel 5.5 업데이트 컨트롤러가 뷰만 반환하는 경우(위의 예와 같이) 루트 파일의 위의 모든 코드를 다음과 같이 바꿀 수 있습니다.

Route::view('/{path?}', 'path.to.view')
     ->where('path', '.*')
     ->name('react');

Jake Taylor의 답변(정답입니다)에 근거해: 약간의 실수가 있어, 그 후에 따옴표가 누락되어 있습니다.'/{path?}', 마지막 하나.

또한 컨트롤러를 사용하지 않고 뷰로 다시 리디렉션하는 경우 다음과 같이 사용할 수 있습니다.

Route::get( '/{path?}', function(){
    return view( 'view' );
} )->where('path', '.*');

주의: 이 루트를 루트 파일(Laravel 5.4의 경우 web.php)의 모든 루트 끝에 추가해 두면, 기존의 모든 유효한 루트가 이 마지막 루트에 도달하기 전에 캐치 되는 경우가 있습니다.

이거면 될 것 같은데

모든 리액트 루트의 경우

Route::get('{reactRoutes}', function () {
    return view('welcome'); // your start view
})->where('reactRoutes', '^((?!api).)*$'); // except 'api' word

라라벨 루트의 경우

Route::get('api/whatever/1', function() {
    return [
        'one' => 'two',
        'first' => 'second'
    ];
});

Route::get('api/something/2', function() {
    return [
        'hello' => 'good bye',
        'dog' => 'cat'
    ];
});

2022년 2월 편집: 최신 Larabel이 V5, 리액트 라우터가 V4일 때 이 솔루션을 올렸습니다.라라벨과 리액트 라우터가 그 이후로 많이 진화했기 때문에 지금은 더 나은 해결책이 있을 수 있다.

==================================================

를 사용하는 것은 어떻습니까?<HashRouter>?

예.

import React from 'react';
import {
    HashRouter,
    Route,
    Link
}from 'react-router-dom';
import Profile from './Profile';

export default class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <HashRouter>
                <Link to="/profile" replace>Profile</Link>
                <Route path="/profile" component={Profile}/>
            </HashRouter>
        );
    }
}

라라벨의 라우터에서...

Route::get('/', function(){
    return view('index'); //This view is supposed to have the react app above
});

와 함께HashRouter클라이언트측 라우팅은,#(Fragment Identifier), Larabel의 라우팅(서버측 라우팅)에서 읽을 수 없습니다.

이 페이지에 도착하면 URL은 다음과 같습니다./.

링크를 클릭하면 URL이 생성됩니다./#/profile컴포넌트가 표시됩니다.

그 후 페이지를 새로 고치면Route not exist에러입니다. 왜냐하면, Laravel의 관점에서는, URL은 아직/. (컴포넌트)Profile아직 남아 있습니다.)

https://reacttraining.com/react-router/web/api/HashRouter

제 설명이 명확했으면 좋겠어요.

인덱스 페이지를 반환할 수 있으며 브라우저 History of React는 다른 모든 작업을 처리합니다.

Route::pattern('path', '[a-zA-Z0-9-/]+');
Route::any( '{path}', function( $page ){   
     return view('index');
});

언급URL : https://stackoverflow.com/questions/40719951/how-to-use-react-router-with-laravel