React Router 组件渲染两次

IT技术 reactjs react-router navbar render
2021-05-16 10:21:16

我有一个导航栏组件，我正在尝试将其组合在一起，但我的 App.js 出现问题，我在其中调用了所有组件。我必须渲染导航栏两次才能使其工作，但它出现了两次，其中只有第二个导航栏起作用。在渲染中取出 2 行代码中的任何一行都会导致错误，其中只显示导航栏的文本（但只显示一次，而不是两次），并且不可点击。

这是 render() 导航栏渲染两次：

render() {
    return (
      <div>
        <Login />
        <Search />
        <BrowserRouter> 
            <div className='container'>
                <Navbar />
                <Route component={Navbar}/>
                <Route exact path="/" component={Home}/>
                <Route path="/bios" component={Bios}/>
                <Route path="/message" component={Message}/>
            </div>
        </BrowserRouter>
      </div>

    );
  }

只有较低的文本是可用的，并且在我上面的渲染函数中取出任一导航栏行以摆脱第一个导航栏，但它不起作用。

2个回答

您可能希望 NavBar 位于您的外部，<BrowserRouter>因为我猜它总是会呈现并且不依赖于匹配某些路线，即

render() {
    return (
      <div>
        <Login />
        <Search />
        <Navbar />
        <BrowserRouter> 
            <div className='container'>
                <Route exact path="/" component={Home}/>
                <Route path="/bios" component={Bios}/>
                <Route path="/message" component={Message}/>
            </div>
        </BrowserRouter>
      </div>
    );
  }

我解决了这个问题。我之前得到的错误是因为下面的 2 个语句：

<Navbar />
    <Route component={Navbar}/>

其中之一是渲染另一个组件，显然如果两个组件重叠，甚至部分重叠，它的功能就会消失。我什至无法判断它是否重叠，因为组件周围有透明的填充。我所做的只是删除第二条语句并在我的 CSS 中设置导航栏样式，使其不再重叠。

其它你可能感兴趣的问题
上一篇如何使用react js在选择字段中将颜色边框底部蓝线更改为绿绿线？ 下一篇ReactJS - 当我改变状态时，props也会改变