导航链接在应用程序组件之外不起作用

时间:2019-06-07 02:44:10

标签: javascript css reactjs bootstrap-4 react-router

我有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路线导航回到首页。

2 个答案:

答案 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是适合您的工作代码段。