如何在 Meteor 中集成 React Router？答案

【问题标题】：How to integrate React Router in Meteor?如何在 Meteor 中集成 React Router？
【发布时间】：2020-12-22 15:10:44
【问题描述】：

我正在尝试在 Meteor Project 中使用 React Router 集成路由。我遵循了 Meteor React 文档，但不知何故它不起作用。尝试使用“Router”而不是“BrowserRouter”，但没有运气。对此有何建议。

imports/startup/client/routes.js

import { BrowserRouter, Route, Switch } from "react-router-dom";

import App, City , NotFound from "respective-modules";
 
export const renderRoutes = () => {
  <BrowserRouter>
    <div>
      <Switch>
        <Route exact path="/" component={App} />
        <Route exact path="/city" component={City} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </BrowserRouter>;

client/main.html

<body>
  <div id="react-target"></div>
</body>

client/main.jsx

import { renderRoutes } from "/imports/startup/client/routes.js";

Meteor.startup(() => {
  render(renderRoutes(), document.getElementById("react-target"));
});

但是出现了一个空白页面。

【问题讨论】：

import App, City , NotFound from "respective-modules"; 看起来不对，或者你真的有你的组件在外部 npm 包中？您在浏览器控制台中是否有任何错误？另外，你可以在这里发布应用程序源吗？我假设您正在使用 / 路由进行测试，这就是空白，对吧？
我只是避免了样板代码@ChristianFritz
嗨@ChristinaFritz，不幸的是没有错误。它只是不渲染 renderRoutes() 函数。如果我连接如下所示的直接组件（），它可以正常工作。但我的要求是路线配置。 Meteor.startup(() => { render( , document.getElementById("react-target")); });

标签： meteor react-router react-router-dom

【解决方案1】：

如果您显示的代码是正确的（即从您正在运行的代码中准确复制），那么您只需要一个额外的大括号：

export const renderRoutes = () => {
  <BrowserRouter>

需要是：

export const renderRoutes = () => 
  <BrowserRouter>

或

export const renderRoutes = () => {
  return <BrowserRouter>

【讨论】：

出色的@Christian Fritz。到目前为止花了将近6个小时。感谢您将我从这个错误中拯救出来。马上接受答案。干杯！
乐于助人！我也不知道这种情况发生在我身上多少次了。