Использование React Router во вкладках панели приложения пользовательского интерфейса материала - PullRequest
Новая
       10

Использование React Router во вкладках панели приложения пользовательского интерфейса материала

0 голосов
/ 12 сентября 2018

Я пытаюсь внедрить последнюю версию React Router с моим существующим компонентом панели приложения UI, но сталкиваюсь с проблемами при реализации. Как я могу использовать компонент <Router> в Route.js в <AppHeader/> в Navbar, чтобы вкладки функционировали как ссылки маршрутизации?

Navbar.js 

import React from "react";
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { AppHeader } from 'app-header';
import { Tab, Tabs } from 'tabs';

const NavBar = (props) => {
  return (
  <div className={props.classes.headerContainer}>
    <AppHeader
      data-testid="app-header-default-example"
      position="static"
      className={props.classes.root}
      renderNav={({ getNavProps }) => (
        <div {...getNavProps({})}>
          <Tabs
            centered
            displayName={'defaultExample'}
            noBorder
            renderTab={({ getTabProps, index }) => {
              const testid = `tab-${index}`;
              return <Tab {...getTabProps()} data-testid={testid} />;
            }}
            tabs={["Page-1", "Page-2", "Page-3"]}
          />
          <p className={props.classes.headerAppTitle}>{props.appTitle}</p>
        </div>
      )}
    /></div>
)};

export default NavBar;

Route.js 

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Main from './Main';
import Form from './Form';

const Content = () => (
  <div>
    <Main />
  </div>
)

const FormEntry = () => (
  <div>
    <Form />
  </div>
)

const Routes = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/form">Form</Link></li>
      </ul>
      <hr/>
      <Route exact path="/" component={Content}/>
      <Route path="/form" component={FormEntry}/>
    </div>
  </Router>
)

export default Routes;
...