Question

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

申请结构

App
--Navigation
--Content
App

应用组件

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

HomeNav组件

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。但是当我使用Link中的react-toolbox组件时，整个页面都会被刷新。

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

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

在react-toolbox文档中，#用于路由（#/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>

react-toolbox链接刷新整个页面

1 个答案: