导航链接在 App 组件之外不起作用

Question

我有 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 路由导航回主页。

Answer 1

在您的代码 sn-p 中，我发现了一些问题，例如您只错过了 import react。

您创建的任何文件，都需要导入 react 之类的，

import React from 'react'; //default

此外，您还在您的navbar component 中扩展Component，这也需要从react 包中导入。

扩展Component的2种方式。

方式 1，

import React from 'react';

class navbar extends React.Component{
   render(){
     return(
       <div>...</div>
     )
   }
}

export default navbar;

方式 2，

import React,{Component} from 'react';

class navbar extends Component{
   render(){
     return(
       <div>...</div>
     )
   }
}

export default navbar;

你在 navbar 组件中错过了这个。

Here 是你的工作代码 sn-p。

Answer 2

看起来这些集成错误很常见，您应该使用：https://github.com/react-bootstrap/react-router-bootstrap