React BrowserRouter загружает только NavBar

Question

Нет ошибки, код должен быть правильным, но я не получил результата, просто панель навигации работает. Я создал приложение basi c с npx

Code App. js

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

import './App.css';

import NavBar from './components/NavBar';

import Home from './components/Home';
import Pagina2 from './components/Pagina2';
import Pagina3 from './components/Pagina3';
import Pagina4 from './components/Pagina4';
import Pagina5 from './components/Pagina5';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <NavBar>
          <Switch>
            <Route path="/home" component={Home} />
            <Route path="/pagina2" component={Pagina2} />
            <Route path="/pagina3/:parametro1?/:parametro2?" component={Pagina3} />
          </Switch>
        </NavBar>
      </BrowserRouter>
    );
  }
}

export default App;

Navbar. js

import React, { Component } from 'react';

import { Link } from 'react-router-dom';

class NavBar extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li><Link to="/home">Home</Link></li>
                    <li><Link to="/pagina2/">Pagina 2</Link></li>
                    <li><Link to="/pagina3/aaa/bbb">Pagina 3</Link></li>
                </ul>
                <hr />
            </div>
        );

    }
}
export default NavBar;

Home. js

import React, { Component } from 'react';
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            myProps: ''
        };
    }
    render() {
        return (
            <>
                <h1>Homepage</h1>
            </>
        );
    }
}

export default Home;

Pagina2. js

import React, { Component } from 'react';

import {NavLink} from 'react-router-dom';

class Pagina2 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            myProps: ''
        };
    }
    render() {
        return (
            <>
                <h1>Pagina2</h1>
                <NavLink activeStyle={{color:'green'}}
                to={{
                    pathname:'/pagina3/a/b',
                    search:'?nome=aaa&eta=22',
                    hash:'#hash-value',
                    state:{
                        fromPagina2:"Info"
                    }
                }}>Link con parametri</NavLink>
            </>
        );
    }
}
export default Pagina2;

Pagina3. js

import React, { Component } from 'react';

class Pagina3 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            parametro2: props.match.params.parametro2
        };
    }
    render() {
        const queryString = new URLSearchParams(this.props.location.search);
        return (
            <>
                <h1>Pagina3</h1>
                <span>{this.props.match.params.parametro1}</span>
                <span>{queryString.get('nome')}</span>
            </>
        );
    }
}
export default Pagina3;

Я вижу только это (я удалил Pagina4 и Pagina5, потому что они то же, что и Home).

Думаю, с моим кодом проблем быть не должно, я проверял его несколько раз, но он все еще не работает. Может быть, это версия npx или npm ... или response-router-dom ^ 5.2.0 ... но если с моим кодом что-то не так, я действительно хочу знать, почему.

Answer 1

Ваша панель навигации - это смежный компонент вашей страницы. Попробуйте:

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

import './App.css';

import NavBar from './components/NavBar';

import Home from './components/Home';
import Pagina2 from './components/Pagina2';
import Pagina3 from './components/Pagina3';
import Pagina4 from './components/Pagina4';
import Pagina5 from './components/Pagina5';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <>
          <NavBar />
          <Switch>
            <Route path="/home" component={Home} />
            <Route path="/pagina2" component={Pagina2} />
            <Route path="/pagina3/:parametro1?/:parametro2?" component={Pagina3} />
          </Switch>
        </>
      </BrowserRouter>
    );
  }
}

export default App;

Answer 2

В React JSX вам нужно писать <NavBar></NavBar> только тогда, когда компонент имеет дочерние компоненты, например:

<NavBar>
    <Child />
    <Child />
    <Child />
</NavBar>

Но здесь NavBar - это отдельный компонент, а Route не будет работать как дочерний элемент NavBar Следовательно, попробуйте изменить App.js как показано ниже

 <BrowserRouter>
    <>
     <NavBar/>
     <Switch>
       <Route path="/home" component={Home} />
       <Route path="/pagina2" component={Pagina2} />
       <Route path="/pagina3/:parametro1?/:parametro2?" component={Pagina3} />
     </Switch>
   </>
</BrowserRouter>

Аналогичный пример: https://codesandbox.io/s/react-bootstrap-nav-active-link-eqm0f