javascript - “你不应该在外面使用" 连链接都在路由器里面
问题描述
我正在学习 React 中的路由系统。我检查了我的代码中的所有内容,它似乎是正确的,但我不知道为什么它不起作用。
版本:
"react-router-dom": "4.2.2",
"react": "^16.8.4",
index.js
我们从 index.js 到 App.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap-social/bootstrap-social.css';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
应用程序.js
我们在 App.js 中实现 BrowserRouter
import React, { Component } from 'react';
import { BrowserRouter} from 'react-router-dom';
import Main from './components/MainComponent';
import './App.css';
import { DISHES } from './shared/dishes';
class App extends Component {
constructor(props) {
super(props);
this.state = {
dishes: DISHES
};
}
render() {
return (
<BrowserRouter>
<div className="App">
<Main />
</div>
</BrowserRouter>
);
}
}
export default App;
MainComponent.js
我们在 MainComponent.js 中定义路由
import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import Header from './HeaderComponent';
import Footer from './FooterComponent';
import Menu from './MenuComponent';
import Home from './HomeComponent';
import { DISHES } from '../shared/dishes';
class Main extends Component {
constructor(props) {
super(props);
this.state = {
dishes: DISHES
};
}
render() {
const HomePage = () => {
return(
<Home />
);
}
return (
<div>
<Header />
<Switch>
<Route path='/home' component={HomePage} />
<Route exact path='/menu' component={() => <Menu dishes={this.state.dishes} />} />
<Redirect to="/home" />
</Switch>
<Footer />
</div>
);
}
}
export default Main;
HeaderComponent.js
NavBar,HeaderComponent.js 中的导航
import React, { Component } from 'react';
import { Nav, Navbar, NavbarBrand, NavbarToggler, Collapse, NavItem, Jumbotron } from 'reactstrap';
import { NavLink } from 'react-router-dom';
class Header extends Component {
constructor(props) {
super(props);
this.toggleNav = this.toggleNav.bind(this);
this.state = {
isNavOpen: false
};
}
toggleNav() {
this.setState({
isNavOpen: !this.state.isNavOpen
});
}
render() {
return(
<div>
<Navbar dark expand="md">
<div className="container">
<NavbarToggler onClick={this.toggleNav} />
<NavbarBrand className="mr-auto" href="/"><img src='assets/images/logo.png' height="30" width="41" alt='Ristorante Con Fusion' /></NavbarBrand>
<Collapse isOpen={this.state.isNavOpen} navbar>
<Nav navbar>
<NavItem>
<NavLink className="nav-link" to='/home'><span className="fa fa-home fa-lg"></span> Home</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to='/aboutus'><span className="fa fa-info fa-lg"></span> About Us</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to='/menu'><span className="fa fa-list fa-lg"></span> Menu</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to='/contactus'><span className="fa fa-address-card fa-lg"></span> Contact Us</NavLink>
</NavItem>
</Nav>
</Collapse>
</div>
</Navbar>
<Jumbotron>
<div className="container">
<div className="row row-header">
<div className="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
</div>
</div>
</Jumbotron>
</div>
);
}
}
export default Header;
解决方案
推荐阅读
- javascript - 如何在 Safari 的 svg x 属性中使用 calc()?
- flutter - 如何在颤动中制作渐变阴影按钮?
- android - 如何更改系统通知抽屉的颜色?
- java - 标题栏是否有一些 jframe 空间?
- vue.js - 日期选择器有时会卡住,我没有错误 Vuejs
- reactjs - 离线网络推送通知
- recursion - 给定 Prolog 中的元素列表,创建所有可能的 AVL 树
- apache-nifi - 为什么 Oracle 数据库查询(Oracle 数据库表列中的长数据类型)不在 QueryDatabaseTable Apache Nifi 中执行?
- amazon-s3 - 使用 lambda(boto 脚本)的跨账户 s3 存储桶同步
- python - 我如何知道 Z3py 中的一个数组是否为空?