React Router结合Laravel时组件无法显示的问题求助

我一眼就发现了核心问题，再结合你的代码细节，咱们一步步把它修好：

1. 路由结构的致命错误：Switch的子元素规则 #

你的<Switch>组件直接包裹了一个<div className="App">，但React Router的Switch要求直接子元素必须是<Route>或者<Redirect>组件。Switch会遍历自己的直接子元素来匹配路由，嵌套在div里的Route根本不会被它识别，这就是AdminLogin组件死活不显示的原因！

调整你的app.js代码，把div移到Switch外面：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import AdminLogin from './AdminLogin';

export default class AdminApp extends Component {
  render() {
    return (
      <Router>
        {/* 把App容器放在Switch外层，这样所有路由组件都会继承这个样式容器 */}
        <div className="App">
          <Switch>
            {/* 这里直接放Route，Switch才能正常识别匹配 */}
            <Route path="/" exact component={AdminLogin} />
            {/* 以后加dashboard路由也直接放这里 */}
            {/* <Route path="/dashboard" component={AdminDashboard} /> */}
          </Switch>
        </div>
      </Router>
    );
  }
}

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

2. 修复AdminLogin里的小bug #

你的表单提交方法里，e.preventDefault少了括号！这会导致表单默认提交行为没被阻止，可能引发页面刷新，影响路由跳转：

onSubmit(e){
  e.preventDefault(); // 加上括号，调用这个方法阻止默认行为
  const user = {
    email : this.state.email,
    password : this.state.password
  }
  adminLogin(user).then(res => {
    if(res) {
      this.props.history.push('/dashboard');
    }
  })
}

3. 配置Laravel后端支持前端路由 #

因为你用的是BrowserRouter，需要让Laravel把所有前端路由请求都指向React的入口页面，避免刷新页面时出现404。在routes/web.php里添加这条路由：

Route::get('/{any}', function () {
    return view('welcome'); // 这里改成你的React入口视图文件名
})->where('any', '.*');

它会捕获所有GET请求，返回你的React页面，让前端路由接管路径匹配。

最后验证 #

修改完这些后，重新编译React资源（运行npm run dev或者npm run watch），刷新页面就能看到AdminLogin组件的"Login Now"标题啦！

内容的提问来源于stack exchange，提问作者Patrick Obafemi