Question

我正在使用react-router-dom定义我在网络应用中的路径。

  render() {
    return (
      <BrowserRouter>
        <div style={{background:'floralwhite'}}>
          <Route path='/' component={Home} />
          <Route path='/calendar' component={Calendar} />
          <Route path='/config' component={UserConfig} />
          <Route path='/login' component={Login} />
          <Route path='/help' component={HelpPage} />
        </div>
      </BrowserRouter>
    );
  }

默认页面Home如下所示：

  render() {
    return (
      <div className="App">
        {this.state.user ? (
          <div>
            <Navbar />
          </div>) :
          (<Login />)}
      </div>


    )
  };

由于在用户登录时我将导航栏放在顶部，所以当我移动到另一条路线时，导航栏始终存在。但是，当我尝试在Home页中添加其他内容时，当我移至其他路径时，它会与其他内容重叠。

在我当前的Home中，我只有Navbar

当我移到另一条路径时

看起来像这样。但是，当我在Home中添加其他内容时，

  render() {
    return (
      <div className="App">
        {this.state.user ? (
          <div>
            <Navbar />
            <h1>
              Some content here
            </h1>
          </div>) :
          (<Login />)}
      </div>


    )
  };

它看起来像这样。我不想让它重叠，我想制作主页以反映其自身的内容，但仍将导航栏放在此处。

我使用不正确吗？

Answer 1

添加精确到您的家庭路线

<Route exact path='/' component={Home} />

Answer 2

<Route path='/' component={Home} />

将在路径具有/的任何时间渲染Home组件，因此/ calendar将触发它，然后渲染日历组件。您也需要更改它：

<Route exact path='/' component={Home} />

Answer 3

您好，只需使用完全匹配的关键字，例如：

#include <cstdlib>
#include <iostream>
#include <string>

int main()
{
  char acct_num[16];
  for (int x = 0; x < 16; ++x) {
    acct_num[x] = rand() % 10 + '0';
  }

  std::cout << std::string(acct_num, 16) << "\n";
}

主页与其他页面重叠使用React Route

3 个答案: