Получение TypeError с помощью React Router

Question

Я пытаюсь внедрить последнюю версию React Router (v.4.3.1) во вкладках пользовательского интерфейса материала, но получаю следующую ошибку: TypeError: Cannot read property 'location' of undefined. Я считаю, что мне нужно использовать какую-то историю местоположений, но не уверен в реализации, учитывая обновления для React Router.

ОБНОВЛЕНИЕ

Мне удалось исправить местоположение неопределенной проблемы и отобразить панель навигации и контент с помощью BrowseRouter as Router, но теперь ссылки панели навигации не отображаются на панели навигации. Нет никакой логики, чтобы показать или скрыть ссылки, поэтому не уверен, что заставляет их не появляться.

App.js

import React, { Component } from "react";
import Main from './Main';
import { Router, Route, Switch, Link } from 'react-router-dom';

class App extends Component {
  constructor() {
    super();
    this.state = {
      appTitle: "App"
    };
  }

  componentDidMount() {
    document.title = this.state.appTitle;
  }

  render() {
    return (
      <ThemeProvider theme={lightTheme}>
       <Router>
         <Switch>
           <Route component={Main} exact path="/" />
         </Switch>
       </Router>
      </ThemeProvider>
    );
  }
}

export default App;

Main.js

import React from 'react';
import PropTypes from 'prop-types';
import { NavBar } from "./Components/Navbar/";

const GetNavBar = props => {
  return (<NavBar appTitle={props.appTitle} />);
}

const Main = props => {
  return (
    <div className={props.classes.root}>
    <GetNavBar appTitle={props.appTitle} { ...data.appHeader } />
    <GetPageComponents {...props} data={data}/>
    </div>
)};

Main.propTypes = {
  onClose: PropTypes.func
};

export default withStyles(styles)(Main);

Navbar.js

import React from "react";
import { Tabs, Tab } from 'tabs';
import PropTypes from 'prop-types';
import { Router } from 'react-router-dom';

const TabLink = linkProps => (
    <a {...linkProps}>{linkProps.linklabel}</a>
);

function renderTab({ getTabProps }) {
const { className, label, ...rest } = getTabProps();
return (
    <Tab
        className={`${className}`}
        component={TabLink}
        linklabel={label}
        to={TabLink}
        {...rest}
    />
 );
}

renderTab.propTypes = {
   getTabProps: PropTypes.func
};

const NavBar = ({onChange, onDeselect, classes}, props) => {
  return (
    <div className={styles.headerContainer}>
    <AppHeader
        data-testid="app-header-default-example"
        position="static"
        className={styles.root}
        getTabProps={({ getTabProps }) => (
          <div {...getTabProps({})}>
          <Router>
            <Tabs>
              <Tab label="Home" component={renderTab} exact to="/" />
              <p className={styles.headerAppTitle}>{props.appTitle} . 
              </p>
            </Tabs>
          </Router>
          </div>
        )}
      />
    </div>
)};

NavBar.propTypes = {
    onChange: PropTypes.func,
    onDeselect: PropTypes.func
};

export default withStyles(styles)(NavBar);

Answer 1

В React Router 4.x попробуйте изменить импорт на что-то вроде следующего, чтобы импортировать маршрутизатор более высокого уровня, например BrowserRouter . В этом примере используется псевдоним Router для ссылки на именованный импорт BrowserRouter, но это не обязательно, вы можете просто использовать BrowserRouter без псевдонима:

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

Технически вы можете импортировать Маршрутизатор , но это будет react-router, а не react-router-dom, и вы обычно отдельно создаете объект истории для него:

import { Router } from 'react-router';

При этом вы, скорее всего, ищете BrowserRouter из react-router-dom, но есть и другие варианты, например HashRouter .

Обновлено

Относительно компонента NavBar. Вы также пытаетесь импортировать Router из react-router-dom и использовать Router в его разметке. Сначала вам нужно удалить этот импорт и Router, так как он не нужен. Если цель состоит в том, чтобы использовать материал-ui Tabs / Tab в качестве навигации, вам нужно будет использовать Link компоненты вместо <a> элементов для TabLink компонента.

import { Link } from 'react-router-dom';

// ...

const TabLink = linkProps => (
  <Link {...linkProps}>{linkProps.linklabel}</Link>
);

Вот StackBlitz , демонстрирующий функциональность на базовом уровне.

Надеюсь, это поможет!