使用Express+React时BrowserRouter追加至API调用问题求助

嗨，第一次提问没关系～从你给出的路由配置来看，我先梳理几个BrowserRouter在全栈项目里最容易踩的坑和解决办法，你可以对照看看是不是你的问题：

• 刷新页面出现404错误：这是BrowserRouter的经典问题！因为React路由是前端路由，刷新时浏览器会直接向Express后端请求对应路径，但后端并没有配置这些前端路由的接口。解决办法很简单，在Express里加一个兜底路由，让所有未匹配到API接口的请求都返回React的index.html：

  // Express 后端代码示例
  const path = require('path');
  
  // 先配置你的API路由
  app.use('/api', yourApiRoutes);
  
  // 兜底路由返回React页面
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../client/build/index.html')); // 注意路径要对应你React打包文件的实际位置
  });
  

  另外别忘了，你的React根组件必须用BrowserRouter包裹所有路由：

  import { BrowserRouter as Router, Route } from 'react-router-dom';
  
  function App() {
    return (
      <Router>
        {/* 你的所有路由配置都要放在这里面 */}
        <Route exact path="/" component={HomePage} />
        <Route path="/account/change-password/:hash" component={ChangePasswordPage} />
        <Route exact path="/account/login" component={LoginPage} />
        <Route path="/account/profile/:id" component={ProfilePage} />
        <Route exact path="/account/register" component={RegisterPage} />
        {/* 剩下的路由继续往下加 */}
      </Router>
    );
  }
  

• 路由匹配不符合预期：比如担心/account/login和/account/profile/:id会不会冲突？你给/account/login加了exact是对的，能避免它被动态路由匹配到。但如果想确保每个URL只匹配第一个符合条件的路由，一定要用Switch组件包裹所有路由：

  import { Switch, Route } from 'react-router-dom';
  
  // 在Router内部使用Switch
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/account/change-password/:hash" component={ChangePasswordPage} />
    <Route exact path="/account/login" component={LoginPage} />
    <Route path="/account/profile/:id" component={ProfilePage} />
    <Route exact path="/account/register" component={RegisterPage} />
    {/* 把404页面路由放在最后，匹配所有未命中的路径 */}
    <Route component={NotFoundPage} />
  </Switch>
  

• 动态路由参数拿不到：如果在ChangePasswordPage或ProfilePage里获取不到:hash或:id参数，要注意获取方式：

  • 类组件：通过this.props.match.params获取

  class ChangePasswordPage extends React.Component {
    render() {
      const { hash } = this.props.match.params;
      return <div>当前重置哈希：{hash}</div>;
    }
  }
  

  • 函数组件：用useParams钩子

  import { useParams } from 'react-router-dom';
  
  function ProfilePage() {
    const { id } = useParams();
    return <div>用户ID：{id}</div>;
  }
  

如果以上都没命中你的问题，可以补充下具体症状——比如是页面跳转没反应、路由组件不渲染、控制台有报错信息等等，这样能更精准地帮你定位问题！

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