Reactjs 使用React路由器获取TypeError_Reactjs_React Router

Reactjs 使用React路由器获取TypeError

reactjs

Reactjs 使用React路由器获取TypeError,reactjs,react-router,Reactjs,React Router,我试图在Material UI选项卡中实现最新版本的React Router（v.4.3.1），但出现以下错误：TypeError:无法读取未定义的的属性“位置”。我相信我需要使用某种位置历史记录，但鉴于路由器的更新，我不确定实现情况更新我已经设法修复了未定义问题的位置，并通过使用BrowseRouter作为路由器来显示导航栏和内容，但现在导航栏中没有显示导航栏链接。没有任何逻辑显示或隐藏链接，因此不确定是什么原因导致它们不显示 App.js import React, { Componen

我试图在Material UI选项卡中实现最新版本的React Router（v.4.3.1），但出现以下错误：

TypeError:无法读取未定义的

的属性“位置”。我相信我需要使用某种位置历史记录，但鉴于路由器的更新，我不确定实现情况

更新

我已经设法修复了未定义问题的位置，并通过使用

BrowseRouter作为路由器来显示导航栏和内容，但现在导航栏中没有显示导航栏链接。没有任何逻辑显示或隐藏链接，因此不确定是什么原因导致它们不显示
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;

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

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

import React，{Component}来自“React”；
从“/Main”导入Main；
从“react Router dom”导入{路由器、路由、交换机、链路}；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
appTitle:“应用程序”
};
}
componentDidMount（）{
document.title=this.state.appTitle；
}
render（）{
返回(
);
}
}
导出默认应用程序；

Main.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;

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

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

从“React”导入React；
从“道具类型”导入道具类型；
从“/Components/NavBar/”导入{NavBar}；
const GetNavBar=props=>{
返回（）；
}
常量Main=props=>{
返回(
)};
Main.propTypes={
onClose:PropTypes.func
};
导出默认样式（样式）（主）；

Navbar.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;

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

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

从“React”导入React；
从“Tabs”导入{Tabs，Tab}；
从“道具类型”导入道具类型；
从“react Router dom”导入{Router}；
const TabLink=linkProps=>(
{linkProps.linklabel}
);
函数renderTab（{getTabProps}）{
const{className，label，…rest}=getTabProps（）；
返回(
);
}
renderTab.propTypes={
getTabProps:PropTypes.func
};
const NavBar=（{onChange，onDeselect，classes}，props）=>{
返回(
(
{props.appTitle}。

)}
/>
)};
NavBar.propTypes={
onChange:PropTypes.func，
onDeselect:PropTypes.func
};
导出默认样式（样式）（导航栏）；
使用React Router 4.x，尝试将导入更改为以下内容，以导入更高级别的路由器，如。此示例使用别名路由器
来引用命名的导入浏览器路由器
，但这不是必需的，您可以使用不带别名的浏览器路由器
：
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

从技术上讲，您可以导入，但这将来自react-router
，而不是react-router-dom
，您通常会单独为其创建一个：
也就是说，您很可能在react router dom
中查找BrowserRouter
，但还有其他选项，例如
已更新
关于NavBar
组件。您还试图从react Router dom
导入Router
，并在其标记中使用Router
。首先，您需要删除该导入和路由器
，因为它不需要。如果目标是使用材质ui选项卡
/选项卡
作为导航，则需要使用链接
组件，而不是在基本级别演示功能
希望这有帮助
 使用React Router 4.x，尝试将导入更改为以下内容，以导入更高级别的路由器，如。此示例使用别名路由器
来引用命名的导入浏览器路由器
，但这不是必需的，您可以使用不带别名的浏览器路由器
：
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

从技术上讲，您可以导入，但这将来自react-router
，而不是react-router-dom
，您通常会单独为其创建一个：
也就是说，您很可能在react router dom
中查找BrowserRouter
，但还有其他选项，例如
已更新
关于NavBar
组件。您还试图从react Router dom
导入Router
，并在其标记中使用Router
。首先，您需要删除该导入和路由器
，因为它不需要。如果目标是使用材质ui选项卡
/选项卡
作为导航，则需要使用链接
组件，而不是在基本级别演示功能
希望这有帮助
 此代码块中没有任何内容引用位置。我们能看到Main
组件吗？此代码块中没有引用位置。我们可以看到Main
组件吗？Alexander-我通过使用BrowserRouter作为路由器来修复该位置错误，但是现在链接没有显示在导航栏中。我已经更新了上面的代码和进一步的解释。有什么想法吗？谢谢它在NavBar
中查找，您还试图从react Router dom
导入Router
，并在渲染方法中使用Router
。您需要删除该导入和路由器
。您还需要更改选项卡的标记以使用Link
组件。我会更新答案。谢谢你这么快更新。我已经做了您建议的更改，但仍然没有将选项卡呈现到DOM中。导航栏本身是，但选项卡不是。还有其他想法吗？谢谢你一直以来的帮助！您可能需要完成答案中提到的StackBlitz，并添加额外的代码以允许进行额外的故障排除。您可能还需要共享您的AppHeader
代码，以了解它是如何呈现选项卡的，以及getTabProps（）
是如何工作的。话虽如此，但要确保你