reactjs - react-toolbox 链接刷新整个页面

Question

我在我的一个项目中使用react-toolbox。

应用结构

App
--Navigation
--Content
App

应用组件

<div>
  <HomeNav />
  {this.props.children}
</div>

主页导航组件

import { Link } from 'react-router';
...
<Navigation type="horizontal">
  <Link to="animals">Animals</Link>
  <Link to="plants">Plants</Link>
</Navigation>

注意：Link在进口自react-router

路线

<Route path="/" component={App}>
  <IndexRedirect to="/animals" />
  <Route path="animals" component={AnimalsPage} />
  <Route path="plants" component={PlantsPage} />
</Route>

正如预期的那样工作正常；只有Content在路由之间切换时才会刷新。但是当我使用react-toolbox中的Link组件时，整个页面都在刷新。

import { Link } from 'react-toolbox/lib/link';
...
<Navigation type="horizontal">
  <Link
    active
    href="animals"
    label="Animals"
  />
  <Link
    href="plants"
    label="Plants"
  />
</Navigation>

有没有办法改变这种行为？

在react-toolbox文档中，#在 routes( #/components/link) 中使用。#但是我在我的路线中使用有限制。

Answer 1

我让它工作：

import AppBar from 'react-toolbox/lib/app_bar';
import {Link} from 'react-router-dom';

<AppBar title={viewModelProps.headerTitle} leftIcon="menu">
  <Link to="/">Home</Link>
  <Link to="/login">Login </Link>
</AppBar>