咨询：在Meteor中使用react-router时<Link>组件不显示的问题

嘿，我来帮你搞定这个react-router Link组件不显示的问题！你说地址栏输入地址能正常导航，首页也能显示，但Link组件却藏起来了，大概率是路由结构或者组件渲染的逻辑出了问题，咱们一步步排查修复：

1. 确保导航栏在全局路由容器中渲染 #

你很可能把包含<Link>的导航组件只放在了首页（IndexRoute对应的组件）里，或者路由结构没让导航栏成为所有页面的公共部分。正确的做法是创建一个全局布局组件，把导航栏放在里面，让所有路由作为这个布局的子组件渲染：

// 先创建全局布局组件
const AppLayout = ({ children }) => (
  <div>
    {/* 这里放你的导航栏，包含Link组件 */}
    <nav>
      <Link to="/">首页</Link>
      <Link to="/about">关于我们</Link>
    </nav>
    {/* 子路由对应的页面内容会渲染在这里 */}
    {children}
  </div>
);

// 重新配置路由结构
const routes = (
  <Router history={browserHistory}>
    <Route path="/" component={AppLayout}>
      <IndexRoute component={Home} />
      <Route path="/about" component={About} />
    </Route>
  </Router>
);

这样不管访问哪个路由，AppLayout都会被渲染，导航栏里的Link自然就会显示在所有页面上了。

2. 检查Link组件的使用姿势是否正确 #

一定要确保你是在React组件的render方法里返回<Link>，而不是直接把Link写在路由配置的外部。比如：

❌ 错误示例：

// 别这么写！Link属于UI组件，要放在具体的组件内部
<Router history={browserHistory}>
  <Link to="/">首页</Link>
  <Route path="/" component={Home} />
</Router>

✅ 正确示例：
把Link放在组件的render函数里，就像上面的AppLayout组件那样。

3. 排查样式或DOM隐藏问题 #

有时候Link组件其实已经渲染了，但被CSS样式悄悄隐藏了。你可以打开浏览器开发者工具（F12），在Elements面板里搜索<a>标签（react-router的Link最终会渲染成a标签），看看它的display、visibility、opacity这些属性是不是被设置成了隐藏状态，或者有没有被其他元素覆盖遮挡。

4. 确认Meteor与react-router的版本兼容 #

如果你的Meteor版本较新，建议使用react-router v4+（v3及以下的写法和v4差异极大）。如果是v4+，路由的写法会有所不同，比如用<BrowserRouter>代替<Router>，直接嵌套<Route>：

import { BrowserRouter, Route, Link } from 'react-router-dom';

const App = () => (
  <BrowserRouter>
    <div>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于我们</Link>
      </nav>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  </BrowserRouter>
);

另外，Meteor自带了meteor/iron:router路由包，如果同时安装了react-router，要确保两者没有冲突，最好只保留一种路由方案。

5. 检查browserHistory的服务器端配置 #

在Meteor中使用browserHistory时，需要确保服务器端能处理所有路由请求（避免刷新页面出现404）。你可以在项目根目录创建server/main.js文件，添加以下代码：

import { Meteor } from 'meteor/meteor';
import { WebApp } from 'meteor/webapp';

WebApp.connectHandlers.use((req, res, next) => {
  res.setHeader('Cache-Control', 'no-cache');
  // 如果请求的不是静态资源，返回首页让react-router处理路由
  if (!req.url.startsWith('/static/') && !req.url.startsWith('/packages/')) {
    req.url = '/';
  }
  next();
});

这样既能保证刷新页面或直接输入地址时的正常导航，也能让Link组件的跳转逻辑正常工作。

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