我正在尝试在我的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完成此操作。有什么想法吗?
答案 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;