Навигационные ссылки не работают за пределами компонента приложения

Question

У меня есть 4 файла: App.js, navbar.js, signIn.js, signUp.js. Я ожидаю, что панель навигации будет отображаться в верхней части каждой страницы, по которой перемещается пользователь. Ссылки на панели навигации работают на главной странице, но ссылки на любой другой странице отключены.

Я попытался установить response-bootstrap через npm вместо использования cdn, но это не изменило проблему. Я попытался создать другую группу компонентов под названием «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;

Код компилируется без ошибок, но я хочу иметь возможность вернуться обратно на домашнюю страницу с маршрутов входа и регистрации.

Answer 1

В вашем фрагменте кода я обнаружил какую-то проблему, например, вы пропустили только import react.

Любой файл, который вы создаете, вы должны импортировать реагировать как,

import React from 'react'; //default

Также вы расширяете Component в вашем navbar component, который также необходимо импортировать из react пакета.

2 способа расширения Component.

Способ 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 компоненте.

Здесь - рабочий фрагмент кода для вас.

Answer 2

Похоже, что эти ошибки интеграции распространены, и вы должны использовать: https://github.com/react-bootstrap/react-router-bootstrap