Блог

Я создаю веб-сайт-портфолио и использую react BrowserRouter, Link и Switch для управления маршрутизацией моих веб-сайтов. Моя проблема в том, что когда я нажимаю на ссылку «Проекты», она меняется по url, но не отображается, однако, когда я обновляю страницу, она работает.

вот как выглядит моя маршрутизация в настоящее время в моем App.js .

 import React, { Component } from 'react';

import NavBar from './Components/NavBar/NavBar'
import Home from './Components/Home/Home';
import Projects from './Components/Projects/Projects';

import { BrowserRouter ,Switch, Route, } from 'react-router-dom';

class App extends Component {
  
  render() {
    return (
      <div className="App">
        <NavBar />
        <BrowserRouter>
          <Switch>
            <Route path="/" component={Home} exact={true} />
            <Route path="/projects" component={Projects} /> 
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;


  

и это то, что мой Navbar.js похоже на то..

 import React, {useState} from 'react';
import { NavLink, BrowserRouter } from 'react-router-dom'
import { Link } from 'react-scroll';

function NavBar() {
  const [navbar,setNavbar] = useState(false)

  const changeBackground = () => {
    if(window.scrollY >= 100) {
      setNavbar(true)
    } else {
      setNavbar(false)
    }
  }

  window.addEventListener('scroll', changeBackground)

  return(
    <BrowserRouter>
      <ul className="nav bg-white sticky-top nav-tabs nav-justified">
        <li className="nav-item">
          <Link 
            className={navbar ? "nav-link text-dark home" : "nav-link text-secondary home"}
            to="home"
            href="/"
            smooth={true}
            offset={50}
            duration={500}>
            Home
          </Link>
        </li>

        <li className="nav-item">
        <Link 
            className={navbar ? "nav-link text-dark home" : "nav-link text-secondary about"}
            to="about"
            smooth={true}
            offset={50}
            duration={500}>
            About
          </Link>
        </li>

        <li className="nav-item">
          <NavLink to="/projects">Projects</NavLink> //This is the link that won't work. 
        </li>

        <li className="nav-item">
         <Link 
            className={navbar ? "nav-link text-dark home" : "nav-link text-secondary contact"}
            to="contact"
            smooth={true}
            offset={50}
            duration={500}>
            Contact
          </Link>
        </li>
      </ul>
    </BrowserRouter>
      
  
  )
}

export default NavBar
  

Любая помощь была бы отличной!

Проблема в том, что вы определяете два разных BrowserRouter . Вся ваша логика маршрутизации должна находиться под одним BrowserRouter:

Приложение должно быть таким:

 class App extends Component {
  render() {
    return (
      <div className="App">
        <BrowserRouter>
          <NavBar />
          <Switch>
            <Route path="/" component={Home} exact={true} />
            <Route path="/projects" component={Projects} /> 
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}
  

и на панели навигации не должно быть оберточного BrowserRouter