使用 React Router 获取 TypeError

Question

我正在尝试在 Material UI 选项卡中实现最新版本的 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';

从技术上讲，您可以导入Router，但这将来自react-router，而不是react-router-dom，您通常会为其单独创建一个history object：

import { Router } from 'react-router';

话虽如此，您最有可能从react-router-dom 中寻找BrowserRouter，但还有其他选项，例如HashRouter。

更新

关于NavBar 组件。您还尝试从react-router-dom 导入Router 并在其标记中使用Router。首先，您需要删除该导入和Router，因为它不是必需的。如果目标是使用 material-ui Tabs/Tab 作为导航，则需要为 TabLink 组件使用 Link 组件而不是 <a> 元素。

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

// ...

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

这是一个StackBlitz，演示了基本级别的功能。

希望对您有所帮助！