链接不使用 React DOM 路由器重定向

Posted 2023-02-21

【中文标题】链接不使用 React DOM 路由器重定向

【英文标题】：Links don't redirect with React DOM Router

【发布时间】：2019-06-25 14:25:30

【问题描述】：

我正在尝试在我的 React 应用程序中使用 react-dom-router 包，但我没有被成功“重定向”到该组件。它仅在我刷新页面或通过 URL 访问时有效。

这是我的App.js：

import React,  Component  from "react";
import  BrowserRouter as Router, Route  from "react-router-dom";

import NavMenu from "./components/NavMenu/NavMenu";
import Contact from "./components/Contact/Contact";
import Home from "./components/Home/Home";

class App extends Component 
  render() 
    return (
      <Router>
        <div>
          <NavMenu />

          <Route exact path='/' component=Home />
          <Route path='/contact' component=Contact />
        </div>
      </Router>
    );
  


export default App;

这是我的 NavbarMenu 组件的代码：

import React,  Component  from "react";
import  Navbar, Nav  from "react-bootstrap";
import  BrowserRouter as Router, Link  from "react-router-dom";

class NavMenu extends Component 
  render() 
    return (
      <Router>
        <Navbar bg='light' expand='lg'>
          <Navbar.Brand>Company name</Navbar.Brand>
          <Nav className='mr-auto'>
            <Nav.Link>
              <Link to='/'>Home</Link>
            </Nav.Link>
            <Nav.Link>
              <Link to='/contact'>Contact</Link>
            </Nav.Link>
          </Nav>
        </Navbar>
      </Router>
    );
  


export default NavMenu;

我猜 Home 和 Contact 组件的代码不相关。

所以，当我访问我的 React 应用默认页面 http://localhost:3000/ 时，我会看到带有链接的导航栏。但是当我点击一个链接时，URL 会发生变化，但在我刷新页面或从 URL 访问之前什么都不会发生。

我关注this tutorial 来完成这项工作。有什么想法吗？

【参考方案1】：

这是因为你使用了两次Router，第一次是在App.js，然后是在NavMenu。我们只需要用Router包装App容器（入口点）即可。

从NavMenu 组件中删除<Router>。像这样写：

import React,  Component  from "react";
import  Navbar, Nav  from "react-bootstrap";
import  Link  from "react-router-dom";

class NavMenu extends Component 
  render() 
    return (
      <Navbar bg='light' expand='lg'>
        <Navbar.Brand>Company name</Navbar.Brand>
        <Nav className='mr-auto'>
          <Nav.Link>
            <Link to='/'>Home</Link>
          </Nav.Link>
          <Nav.Link>
            <Link to='/contact'>Contact</Link>
          </Nav.Link>
        </Nav>
      </Navbar>
    );
  


export default NavMenu;

【讨论】：

感谢您的回复。当我像你说的那样改变时出现这个错误：React.Children.only expected to receive a single React element child.

你还在其他地方使用路由器吗？可以分享完整的代码github链接吗？

这些是我修改的唯一文件。我没有在其他地方使用另一个<Router>。我使用create-react-app 生成代码...