时间戳

首页 > 解决方案 > React BrowserRouter 只加载 NavBar

reactjs - React BrowserRouter 只加载 NavBar

问题描述

没有错误，代码应该是正确的，但我没有得到任何结果，只是导航栏正在工作。我用 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;

导航栏.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;

主页.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... 但如果我的代码有任何问题，我真的很想知道原因。

标签： reactjsreact-router-domnpx

解决方案

在 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

推荐阅读