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';

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

已更新

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

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

// ...

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

这里是StackBlitz，在基本级别上演示了功能。

希望有帮助！

使用React Router获取TypeError

1 个答案: