Reactjs - изменение url с использованием реактивного маршрутизатора, но компонент не меняется

Question

Я хочу отобразить панель навигации со ссылками на страницы входа и регистрации, но всякий раз, когда я нажимаю на них, URL-адрес изменяется так, как я хотел, но соответствующие компоненты не отображаются. Вот мой код:

Приложение. js

import React, { Component } from 'react';
import NavBar from './components/NavBar/NavBar';
import {BrowserRouter as Router,Route,withRouter} from "react-router-dom";
import Login from './components/Login';
import SignUp from './components/SignUp';
import Landing from './components/Landing';


class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">

          <NavBar />
          <Route exact path="/" component={withRouter(Landing)} />
          <div className="container">
            <Route exact path="/login" component={withRouter(Login)} />
            <Route exact path="/signup" component={withRouter(SignUp)} />
          </div>
        </div>
      </Router>
    );
  }
}
export default App;

NavBar. js

import React,{Component} from "react";
import {BrowserRouter as Router,withRouter,Link} from "react-router-dom";
import './NavBar.css'



class NavBar extends Component {
    render() {
        return (
            <Router>
            <header className='navbar'>
                <nav className='navbar_navigation'>
                    <div />
                    <div className='navbar_logo'>
                        <Link to='/'>Home</Link>
                    </div>
                    <div className='navbar_nav-items'>
                        <ul>
                            <li><Link to="/signup" className="nav-link">Sign up</Link></li>
                            <li><Link to="/login" className="nav-link">Log In</Link></li>
                            <li><Link to="/guest-env" className="nav-link">Continue as guest</Link></li>
                        </ul>
                    </div>
                </nav>
            </header>
            </Router>
        );
    }
}

export default withRouter(NavBar);

Landing, Login и Registration - это в основном компоненты, которые пока просто отображают текст в h2, так как я хочу проверить, нормально ли они отображаются. Также, когда я go напрямую перехожу к соответствующим URL-адресам: / login или / signup, я не вижу никаких изменений, и панель навигации - единственное, что отображается в этих URL-адресах. Я тоже пробовал добавить переключатель, но ничего не изменилось.

Answer 1

Проблема здесь в том, что компонент Navbar использует маршрутизатор сам по себе, и, следовательно, компоненты Link не могут взаимодействовать с внешним Router компонентом, который отображает маршруты. Убедитесь, что вы используете только один экземпляр компонента Router.

Компоненту Navbar не нужен Router экземпляр

class NavBar extends Component {
    render() {
        return (
            <header className='navbar'>
                <nav className='navbar_navigation'>
                    <div />
                    <div className='navbar_logo'>
                        <Link to='/'>Home</Link>
                    </div>
                    <div className='navbar_nav-items'>
                        <ul>
                            <li><Link to="/signup" className="nav-link">Sign up</Link></li>
                            <li><Link to="/login" className="nav-link">Log In</Link></li>
                            <li><Link to="/guest-env" className="nav-link">Continue as guest</Link></li>
                        </ul>
                    </div>
                </nav>
            </header>
        );
    }
}

Рабочая демонстрация

Answer 2

Если вы хотите отобразить только один компонент на основе маршрута, вам нужно использовать компонент Switch из response-router:

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Switch} from "react-router-dom"


class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <NavBar />
            <Switch>
              <Route exact path="/">
                <Page 1 />
              </Route>
              <Route exact path="/login">
                <Page 2 />
              </Route>
              ... etc
            </Switch>
        </div>
      </Router>
    );
  }
}

export default App;