Reactjs 使用“react router”时不显示链接`

我正在尝试使用Meteor中的

react router

创建导航栏

当键入浏览器时，页面似乎可以很好地导航。但是，当使用文档中给出的

时，会出现主页，同时隐藏

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

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;

从“React”导入React；
从“react Router”导入{Router，Route，IndexRoute，Link，browserHistory}；
/**
*React路由器客户端路由定义。
*@namespace-Client.Routes
*@desc这是react路由器的主要定义。
*/
将*作为组件从“/templates.jsx”导入；
常数路由=（）=>(
主页您可以通过创建一个我喜欢称之为“根路径”的路径来实现这一点，该路径包含导航栏及其下方嵌套的所有内容。看起来您已经开始使用
主布局
。我建议将链接移动到
主布局
组件中

<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>


我设法找到了答案

在routes.jsx中，观察到已配置主布局模板。因此，对于每个页面，引用此主布局即可，如下所示：

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;

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
};

从“React”导入React；
从“react Router”导入{Router，Route，IndexRoute，browserHistory，Link}；
/**
*React路由器客户端路由定义。
*@namespace-Client.Routes
*@desc这是react路由器的主要定义。
*/
将*作为组件从“/templates.jsx”导入；
常数路由=（）=>(
);
导出默认路径；

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

主布局.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;

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
};

import./master layout.css'；
从“React”导入React，{Component}；
从“反应路由器”导入{Link}；
类MasterLayoutComponent扩展了组件{
静态propTypes={}
静态defaultProps={}
建造师（道具）{
超级（道具）；
this.state={}；
}
componentWillMount（）{}
componentDidMount（）{}
componentWillUnmount（）{}
componentDidCatch（错误，信息）{
console.log（错误、信息）；
}
render（）{
返回(
关于
家
{this.props.children}
);
}
}
常量主布局=主布局组件；
出口{
总图，
主布局组件
};
您能否尝试将路由定义放在
中？顺便说一句，您提到了react router v4，它可能不再具有IndexRoute…这与我之前发布的答案相同。此外，您可以通过将路由嵌套在“/”下进一步简化此操作正如我在回答中所说的路线。这两种方法似乎是做同一件事的两种等效方法。但我不知道你可以嵌套路线。这真的很好，但是我会坚持上面的方法！！谢谢！