我在 Laravel Mix 中使用 React 路由器刷新浏览器时收到错误 404

Question

我知道有几个帖子有类似的问题，但不同的方法似乎无法理解。我想了解更多并能够使用 React.js 和 Laravel.

开发多个应用程序

Header.js: 导入文件

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Link,
    Switch,
    Route
} from 'react-router-dom';
import Home from './Home';
import About from './About';
import Dashboard from '../admins/Dashboard';
import Contact from './Contact';

路由器(BrowserRouter)

<Router>
       <div>
            <nav className="navbar navbar-expand-lg  navbar-dark bg-dark navbar-fixed-top">
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>

            <div className="collapse navbar-collapse" id="navbarSupportedContent">
                <ul className="navbar-nav mr-auto">
                    <li className="nav-item active">
                        <Link className="nav-link"  to="/" exact

                        >Home</Link>
                    </li>
                    <li className="nav-item">
                        <Link className="nav-link" to="/about">About Us</Link>
                    </li>

                    <li className="nav-item">
                        <Link className="nav-link" to="/contact">Contact</Link>
                    </li>
                </ul>
                <form className="form-inline my-2 my-lg-0">
                <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
                <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
            </nav>
            <Switch>
                    <Route  exact path='/'  component={Home}/>
                    <Route  exact path="/about" component={About}/>
                    <Route  path='/contact' component={Contact}/>
                    <Route  path='/admins/dashboard' component={Dashboard}/>
            </Switch>
       </div>
       </Router>

当我单击 link 时，它会显示 link，但每当我重试刷新页面时，它都会显示错误。我已经尝试过可能的例子，但似乎没有任何效果。我不知道我是否做错了。我一直在想办法解决这个问题。我看到一篇文章说 createBrowserHistory 已被弃用并且在 react-router v4 上不受支持，即使我正在努力实现该示例。有没有更好的办法来处理这个问题？

我有多个页面（组件）。

Index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,

} from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';



export default class Index extends Component {

    render() {
        return (
            <div>
                <Header />

                <Footer/>
            </div>
        );
    }
}

if (document.getElementById('app')) {
    ReactDOM.render(<Index />, document.getElementById('app'));
}

about.js

import React, { Component }from 'react';
import { Redirect } from 'react-router-dom';
class About extends Component {

    constructor(props)
    {
        super(props);
    }

    render(){
        return (
            <div className="jumbotron">
                <h2>About Us</h2>
            </div>
        );
    }
}



export default About;

app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes React and other helpers. It's a great starting point while
 * building robust, powerful web applications using React + Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh React component instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

require('./components/Index');

Answer 1

为了知识的缘故，我认为你做错了整件事。您的 index.js 需要包含 import { BrowserRouter, Switch, Route } from 'react-router-dom' 以及在 BrowswerRouter 的锚标记内定义的路由，即在

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Header from './Header';
import Footer from './Footer';
import Home from './Home';
import About from './About';
import Dashboard from '../admins/Dashboard';
import Contact from './Contact';


    export default class Index extends Component {

        render() {
            return (
                <BrowserRouter>
                    <div>
                   <Header/>
                    <Switch>
                        <Route  exact path='/'  component={Home}/>
                        <Route  exact path='/about' component={About}/>
                        <Route  path='/contact' component={Contact}/>
                        <Route  path='/admins/dashboard' component={Dashboard}/>
                    </Switch>
                   <Footer/>
                </div>
                </BrowserRouter>

            );
        }
    }

    if (document.getElementById('app')) {
        ReactDOM.render(<Index />, document.getElementById('app'));
    }

因为这是一个Laravel Mix，预置reactjs，到你的routes下的web.php改成Route::view('/{path?}' , 'welcome'); 这意味着您将视图限制在一个页面上，但从您的视图中呈现多个组件。

在您的 welcome.blade.php 中，确保避免使用绝对路径，而是使用类似这样的内容 href="{{ asset('css/app.css') }}"

在您的 Header.js 中，删除不需要的导入文件。 从 'react-router-dom' 导入 { Link };

如果您在理解编排方面遇到任何困难，可以发送完整的 header.js、welcome.blade.php 等帮助

Answer 2

在

上设置 basename 属性

<Router basename={'/directory-name'}>
    <Route path='/' component={Home} />
</Router>

定义您的 laravel 路线，如下所示

Route::view('/{path?}', 'welcome');

Answer 3

这对我有帮助：

在你的 routes/web.php

Route::get("{path?}", "WebControllers\HomeController@index")->where('path', '.+');

Answer 4

这种方式拯救了我！

Route::view('{path}', 'Home')->where('path', '([A-z\d\-\/_.]+)?');

Answer 5

如果你使用 react with Laravel 那么你可以在 Laravel web.php[router file]

上使用它

路线::视图('/{路径?}', 'welcome');

我在 Laravel Mix 中使用 React 路由器刷新浏览器时收到错误 404

I receive error 404 on refreshing browser using React router in Laravel Mix

reactjs

react-router-v4

laravel-mix