reactjs - React-mdl Error: Invariant failed: You should not use outside a该网站没有被路由
问题描述
main.js
import React from 'react';
import {BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import home from './home';
import about from './about';
import menu from './menu';
import gallery from './gallery';
import franchise from './franchise';
const Main = () => (
<Switch>
<Route exact path ="/" component={home} />
<Route path ="/about" component={about} />
<Route path ="/menu" component={menu} />
<Route path ="/gallery" component={gallery} />
<Route path ="/franchise" component={franchise} />
</Switch>
)
export default Main;
导航.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Layout, Header, Navigation, Drawer, Content} from 'react-mdl';
import Main from './main';
export default class CustomNavbar extends Component {
render() {
return (
<div className="demo-big-content">
<Layout>
<Header title="CHEFSTYLE" scroll>
<Navigation>
<Link href="/" to="/">Home</Link>
<Link href="/about" to="/about">About</Link>
<Link href="/menu">Menu</Link>
<Link href="/gallery">Gallery</Link>
<Link href="/franchise">Franchise</Link>
</Navigation>
</Header>
<Drawer title="CHEFSTYLE">
<Navigation>
<Link href="/" to="/">Home</Link>
<Link href="/about" to="/about">About</Link>
<Link href="/menu">Menu</Link>
<Link href="/gallery">Gallery</Link>
<Link href="/franchise">Franchise</Link>
</Navigation>
</Drawer>
<Content>
<div className="page-content" />
<Main/>
</Content>
</Layout>
</div> )
}
}
错误:不变量失败:您不应在不变量之外使用 D:/pandemic/pandemicmateria/kupsmaterial/node_modules/tiny-invariant/dist/tiny-invariant.esm.js:11(匿名函数) D:/pandemic/pandemicmateria/modules /Link.js:84 如果我在 main.js 中使用 Router 标记而不是 Switch,并且如果我在 nav.js 中将导航标记与 Router 标记括起来,则我正在使用 react-mdl 进行 UI 反应,这意味着我没有收到任何错误但我没有得到输出......我的意思是页面没有相对于链接进行路由
解决方案
在 Index.js 中添加 BrowserRouter,如下所示,对我有用。
ReactDOM.render (
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
推荐阅读
- raspberry-pi - Raspberry, check electric current
- json - Webpack 4:使用文件加载器在输出中包含许多 JSON 文件
- c++ - 调用模板参数 constexpr 方法?
- ios - 声称的促销代码内容仅在其他设备上可用
- apache-spark - Spark SQL 查询历史
- storage - 无法将 Netapp(8.1.4P1 7-Mode)与 jdk1.8.0_181 连接
- firebase - Firebase 规则通配符和子项比较
- python - AWS Glue 作业失败并出现错误:“写入行错误”
- android - 无法使用 android studio 3.1.4 在 mac 中创建和同步 android 项目
- alfresco - 关闭/禁用自定义文件夹的继承权限