Javascript React/Router不渲染组件

我的react router无法呈现我的所有页面/组件。因此，当我点击第1页时，它会呈现其中的内容，但当我点击第2页或第3页时，它不会呈现内容。它仅呈现第一个组件/第1页。如果可能的话，我想要一些帮助

function App() {
  return (
    <div className="App">
     <NavBar/>
    <Router>
    <Switch>
     
     <Route exact path='/Page1' component={Page1}/>
        <Page1/>
     <Route exact  path='/Page2' component={Page2}/>
        <Page2/>
     <Route exact path='/Page3' component={Page3}/>
        <Page3/>
      <Route exact path='/' component={Home}/>

     </Switch>
     </Router>
     
      
    </div>
  );
}

export default App;




function NavBar(props) {
    return (
        <Router>
        <div className="nav">
             <div className="nav1">
            <Link to='/'> 
             Home
            </Link>

            <Link to='/page1'> 
             Page 1
            </Link>

            <Link to='/page2'> 
              Page2
            </Link>
      
            <Link to='/page3'> 
              Page3
            </Link>
         </div>
          </div>
          </Router>

        )
}

export default NavBar  

函数应用程序（）{
返回(
);
}
导出默认应用程序；
功能导航栏（道具）{
返回(
家
第1页
第2页
第3页
)
}
导出默认导航栏

您的链接没有指向相同的路线，您输入了一个错误，请将您的to=“/page1”更改为=”/page1'

我认为您在这里有一些错误：

你的道路和吊灯指出的不一样

您的路线声明不正确：

关于第2点的更多信息：

您声明了一个路由，并向其传递一个组件道具，但您还呈现了它下面的实际页面；这是不正确的：

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

我不确定您使用的是哪一版本的react路由器，但我认为您必须选择1种方法；传递组件道具，或将实际内容呈现为路由组件的子级：

<Route exact path='/page1' component={Page1}/>

或

---

有几件事需要讨论。让我们将每一项单独列出：

路由路径不区分大小写 路线路径并不像我最初认为的和其他人在这个问题上那样区分大小写，但我建议您保持它们完全相同，以保持理智，并避免其他开发人员产生疑问

导航栏不应该有自己的路由器 您的

路由器

应该同时包装导航栏和路由。现在他们每个人都有独特的路由器

React路由器完全不依赖于网络。您当前的层次结构是：

└── App
    ├── NavBar
    │   └── Router (Router A)
    └── Router (Router B)

所有的React路由器（

，

等）在引擎盖下调用

useContext（）

，以获取由

创建的最近的上下文。由于

有自己的

路由器

，这就是它将影响的路由器。你需要它是：

.
└── App
    └── Router (Only Router)
        └── NavBar

这样，

NavBar

中的

将只影响，并纠正路由器

上下文

不正确地切换儿童
应仅将
路由
或
重定向
作为子项，您将普通组件作为子项，这也可能导致问题

从

的所有子级都应该是
或

元素。只有与当前位置匹配的第一个子项将被删除
渲染

工作示例
综上所述，我们可以看看以下示例：
const{render}=ReactDOM；
const{BrowserRouter:Router，Switch，Link，Route}=ReactRouterDOM；
常量BadNavBar=（）=>(
坏导航条
此导航栏将影响其自身的个人路由器

{/*路由器A*/}
{/*
*这些链接只会更改路由器A的路径
*因为这是他们将在内部接收的上下文
*当它们的组件调用useHistory时（这对您是隐藏的）
*/}
家
第1页
第2页
);
const GoodNavBar=（）=>(
好导航条
此导航栏将影响“右侧”路由器，因为它将使用该上下文

{/*
*这些链接将更改最近路由器的路径
*在组件层次结构中（如果存在错误，则抛出错误）
*层次结构中没有路由器）
*/}
家
第1页
第2页
);
常量应用=（）=>(
{/*路由器B*/}
我回家了
我在第一页
我在第二页
);
渲染(
,
document.getElementById（“应用程序”）
);
您输入了一个错误：/page1！==/第1页

为一致性声明一个常量变量。例如：

const route = "/home";
function App() {
  return (
    <div className="App">
     <NavBar/>
    <Router>
    <Switch>
       <Route exact path={route} component={Page1}/>
     </Switch>
     </Router>
     
      
    </div>
  );
}

export default App;




function NavBar(props) {
    return (
        <Router>
        <div className="nav">
             <div className="nav1">
            <Link to={route}> 
             Page 1
            </Link>
         </div>
          </div>
          </Router>

        )
}

export default NavBar  

const route=“/home”；
函数App（）{
返回(
);
}
导出默认应用程序；
功能导航栏（道具）{
返回(
第1页
)
}
导出默认导航栏
不确定React路由器是否在意，但路径的情况不匹配，
/Page2！==/第2页
。检查这是否是问题。这不是问题。这没有帮助。如果我将其包装在路由器中，则不会显示任何内容，甚至不会显示任何内容Page1@tekila12不，我肯定这是问题所在。请检查我示例中的代码。您的导航栏不应该有自己的
。应该只有1个
，并且
应该在它里面。如果我把你的GoodNavBar链接放在没有路由器错误的地方，会弹出“你不应该在外面使用”@tekila12正确，这就是你为什么把它放在路由器里的原因。如果它无法到达路由器，它将如何影响路由器？整个机制基于
React.Context
s。如果使用路由器的东西不在以路由器为父级的组件链中，它就不能告诉路由器上下文该做什么，并抛出错误。这是我的错误。谢谢你的正确答案仍然是同样的故事。你检查过文档并尝试先复制他们的例子了吗？但当我手动切换时。当我像这样手动编写“locahost/Page2”或“3”时，它会工作，但当我单击它时，它不会显示内容。参见此示例：
const route = "/home";
function App() {
  return (
    <div className="App">
     <NavBar/>
    <Router>
    <Switch>
       <Route exact path={route} component={Page1}/>
     </Switch>
     </Router>
     
      
    </div>
  );
}

export default App;




function NavBar(props) {
    return (
        <Router>
        <div className="nav">
             <div className="nav1">
            <Link to={route}> 
             Page 1
            </Link>
         </div>
          </div>
          </Router>

        )
}

export default NavBar