React BrowserRouter 只加载 NavBar

Question

没有错误，代码应该是正确的，但我没有得到任何结果，只是导航栏在工作。我用 npx

生成了基本应用程序

代码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 版本...或 react-router-dom ^5.2.0...但如果我的代码有任何问题，我真的很想知道为什么。

Answer 1

在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

Answer 2

您的导航栏是页面的相邻组件。尝试：

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;

React BrowserRouter 只加载 NavBar

React BrowserRouter only load the NavBar

reactjs

react-router-dom

npx