我有4个文件:App.js,navbar.js,signIn.js,signUp.js。我希望导航栏将显示在用户浏览的每个页面的顶部。导航栏中的链接可在主页上使用,但在任何其他页面上均被禁用。
我尝试通过npm而不是使用CDN来安装react-bootstrap,但这并没有改变问题。我尝试创建另一组名为“ NavigationLinks.js”的组件,但这也不起作用。我无所适从。
以下是相关文件:
App.js
import logo from './logo.svg';
import './App.css';
import Navbar from './components/layout/navbar'
import Dashboard from './components/feed/dashboard'
import SignIn from './components/auth/signIn'
import SignUp from './components/auth/signUp'
import { BrowserRouter, Switch, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div className="App">
<Navbar/>
<Switch>
<Route exact path="/" component={Dashboard}/>
<Route path="/signin" component={SignIn}/>
<Route path="/signup" component={SignUp}/>
</Switch>
</div>
</BrowserRouter>
);
}
export default App;
Navbar.js
import { Switch, Route, Link} from 'react-router-dom';
import { Navbar, Nav, Form, FormControl, Button, NavItem } from 'react-bootstrap';
//import './navbar.css';
class navbar extends Component {
render() {
return (
<div>
<div>
<Navbar>
<Navbar.Brand as={Link} to='/'>Rekindle</Navbar.Brand>
<Navbar.Collapse>
<Nav className="mr-auto">
<NavItem eventkey={1} href="/">
<Nav.Link as={Link} to="/" >Home</Nav.Link>
</NavItem>
<NavItem eventkey={1} href="/signup">
<Nav.Link as={Link} to="/signup" >Sign Up</Nav.Link>
</NavItem>
<NavItem eventkey={1} href="/signin">
<Nav.Link as={Link} to="/signin" >Login</Nav.Link>
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
{/*this div works for the routing */}
<div>
</div>
</div>
);
}
}
export default navbar;
代码编译没有错误,但是我希望能够从signIn和signUp路线导航回到首页。
答案 0 :(得分:0)
这些集成错误似乎很常见,您应该使用:https://github.com/react-bootstrap/react-router-bootstrap
答案 1 :(得分:0)
在您的代码段中,我发现了一些问题,例如您仅错过了getCommandName()
import
。
您创建的任何文件都需要导入类似的反应
react
此外,您正在import React from 'react'; //default
中扩展Component
,这也需要从navbar component
包中导入。
两种扩展react
的方式。
方法1
Component
方法2,
import React from 'react';
class navbar extends React.Component{
render(){
return(
<div>...</div>
)
}
}
export default navbar;
您在import React,{Component} from 'react';
class navbar extends Component{
render(){
return(
<div>...</div>
)
}
}
export default navbar;
组件中错过了这一点。
Here是适合您的工作代码段。