Javascript 链接不'；使用React-DOM路由器进行重定向

我正在尝试在我的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;

import React，{Component}来自“React”；
从“react Router dom”导入{BrowserRouter as Router，Route}；
从“/components/NavMenu/NavMenu”导入导航菜单；
从“/components/Contact/Contact”导入联系人；
从“/components/Home/Home”导入主页；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

这是我的导航栏菜单组件代码：

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;

import React，{Component}来自“React”；
从“react bootstrap”导入{Navbar，Nav}；
从“react Router dom”导入{BrowserRouter as Router，Link}；
类导航菜单扩展组件{
render（）{
返回(
公司名称
家
接触
);
}
}
导出默认导航菜单；

我猜主页和联系人组件的代码不相关

因此，当我访问我的React应用程序默认页面

http://localhost:3000/

我看到导航栏及其链接。但是当我点击一个链接时，URL会改变，但在我刷新页面或从URL访问之前，什么都不会发生

---

我是跟着来完成这件事的。有什么想法吗？

这是因为您使用了两次

Router

，首先在

App.js

中，然后在

NavMenu

中。我们只需要用

路由器

包装应用程序容器（入口点）

从

NavMenu

组件中卸下

。这样写：

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;

import React，{Component}来自“React”；
从“react bootstrap”导入{Navbar，Nav}；
从“react router dom”导入{Link}；
类导航菜单扩展组件{
render（）{
返回(
公司名称
家
接触
);
}
}
导出默认导航菜单；

感谢您的回复。当我像您所说的那样更改时，会出现此错误：

React.Children。只希望接收一个React元素子元素。

您是否也在其他地方使用路由器？你能分享完整的代码github链接吗？我只修改了这些文件。我没有在其他地方使用另一个

。我使用

create react app

生成代码。。。