1

I'm using react-toolbox in one of my projects.

Application structure

App
--Navigation
--Content
App

App Component

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

HomeNav Component

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

Note: Link in imported from react-router

routes

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

This is working fine as expected; only the Content is refreshed when switching between routes. But when I used Link component from react-toolbox, the entire page is being refreshed.

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

Is there any way to change this behavior?

In react-toolbox documentation, # is used in the routes(#/components/link). But I have limitations on using # in my routes.

Venugopal
  • 1,888
  • 1
  • 17
  • 30
  • A link is responsible for navigation. If you can't use hash routing, you'll need to either intercept the link click and do an `event.stopPropagation()` or use something other than Link. – Matt May 30 '17 at 14:36

1 Answers1

0

I got it working:

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>
Pang
  • 9,564
  • 146
  • 81
  • 122
Ankur Arora
  • 67
  • 1
  • 8