使用`react-router`时链接不显示

Question

我正在尝试在Meteor中创建一个带react-router的导航栏。

当键入浏览器时，页面似乎正常导航。但是，当使用文档中给出的<Link>时，会显示主页，同时隐藏<Link>。

如何显示给定页面的导航栏链接？

import React from 'react';
import {Router, Route, IndexRoute, Link, browserHistory} from 'react-router';

/**
 * The React Router client side routing definitions.
 * @namespace Client.Routes
 * @desc This is the main definition for the react router.
 */

import * as Component from './templates.jsx';

const Routes = () => (
  <Router history={browserHistory}>
    <div>
      <Link to="/">Home</Link> <----------- This does not show in HTML page
    </div>
  <Route path="/" component={Component.MasterLayout}>
    <IndexRoute component={Component.Home}/>
  </Route>

  <Route path="/about" component={Component.MasterLayout}>
    <IndexRoute component={Component.About}/>
  </Route>
  <Route path="*" component={Component.MasterLayout}>
    <IndexRoute component={Component.NotFound}/>
  </Route>
</Router>
);

export default Routes;

Answer 1

你可以通过创建我喜欢称之为＆＃34; root route＆＃34;来实现这一点。它保存你的导航栏，其下面嵌套了所有东西。看起来您已经使用MasterLayout启动了此功能。我建议您将链接移到MasterLayout组件中。

<Router history={browserHistory}>
  <Route path="/" component={ Component.MasterLayout }> <-----Move <Link> into here
    <IndexRoute component={Component.Home}/>
    <Route path="/about" component={Component.About} />
    <Route path="*" component={Component.NotFound} />
  </Route>
</Router>

Answer 2

我设法找到了答案。

在routes.jsx中，观察到已配置主布局模板。因此，对于每个页面，引用此MasterLayout都会这样做：

<强> routes.jsx

import React from 'react';

import {Router, Route, IndexRoute, browserHistory, Link} from 'react-router';
/**
 * The React Router client side routing definitions.
 * @namespace Client.Routes
 * @desc This is the main definition for the react router.
 */

import * as Component from './templates.jsx';

const Routes = () => (<Router history={browserHistory}>

  <Route path="/" component={Component.MasterLayout}>
    <IndexRoute component={Component.Home}/>
  </Route>

  <Route path="/about" component={Component.MasterLayout}>
    <IndexRoute component={Component.About}/>
  </Route>

  <Route path="/me" component={Component.MasterLayout}>
    <IndexRoute component={Component.Me}/>
  </Route>

  <Route path="*" component={Component.MasterLayout}>
    <IndexRoute component={Component.NotFound}/>
  </Route>

</Router>);

export default Routes;

对于主布局，请在显示子项之前包含导航栏，如下所示：

主-layout.jsx

import './master-layout.css';
import React, {Component} from 'react';
import {Link} from 'react-router';

class MasterLayoutComponent extends Component {
  static propTypes = {}

  static defaultProps = {}

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidCatch(error, info) {
    console.log(error, info);
  }

  render() {
    return (<div>
      <div>
        <Link to="/about">About</Link>
        <Link to="/">Home</Link>
      </div>
      <div>
        {this.props.children}
      </div>
    </div>);
  }
}

const MasterLayout = MasterLayoutComponent;
export {
  MasterLayout,
  MasterLayoutComponent
};