链接不使用React DOM Router重定向

时间:2019-02-01 02:54:40

标签: javascript reactjs ecmascript-6 react-router

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

我想主页联系人组件的代码不相关。

因此,当我访问React应用程序默认页面http://localhost:3000/时,我会看到导航栏及其链接。但是,当我单击链接时,URL会发生变化,但是直到刷新页面或从URL进行访问之前,什么都不会发生。

我正在按照this tutorial完成此操作。有什么想法吗?

1 个答案:

答案 0 :(得分:0)

是因为您两次使用Router,首先在App.js中使用,然后在NavMenu中再次使用。我们只需要用Router包装App容器(入口点)。

<Router>组件中删除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;