链接不会使用 React DOM 路由器重定向 [英] Links don't redirect with React DOM Router
问题描述
我正在尝试在我的 React 应用程序中使用 react-dom-router
包,但我没有成功重定向"到组件.仅当我刷新页面或通过 URL 访问时才有效.
这是我的App.js
:
import React, { Component } from "react";import { BrowserRouter as Router, Route } from "react-router-dom";从./components/NavMenu/NavMenu"导入NavMenu;从./components/Contact/Contact"导入联系人;从./components/Home/Home"导入Home;类 App 扩展组件 {使成为() {返回 (<路由器><div><导航菜单/><路由精确路径='/' component={Home}/><Route path='/contact' component={Contact}/>
</路由器>);}}导出默认应用程序;
这是我的 NavbarMenu 组件的代码:
import React, { Component } from "react";import { Navbar, Nav } from "react-bootstrap";import { BrowserRouter as Router, Link } from "react-router-dom";类 NavMenu 扩展组件 {使成为() {返回 (<路由器><Navbar bg='light' expand='lg'><Navbar.Brand>公司名称</Navbar.Brand><Nav className='mr-auto'><导航链接><链接到='/'>主页</链接></导航链接><导航链接><Link to='/contact'>联系方式</Link></导航链接></导航></导航栏></路由器>);}}导出默认导航菜单;
我猜主页的代码&联系人组件不相关.
因此,当我访问我的 React 应用程序默认页面 http://localhost:3000/
时,我会看到带有链接的导航栏.但是当我点击一个链接时,URL 会发生变化,但在我刷新页面或从 URL 访问之前什么都不会发生.
我正在关注本教程来完成这项工作.有什么想法吗?
这是因为您使用了 Router
两次,第一次在 App.js
中,然后在 App.js
中再次使用代码>导航菜单代码>.我们只需要用Router
包裹App容器(入口点)即可.
从 NavMenu
组件中删除
.像这样写:
import React, { Component } from "react";import { Navbar, Nav } from "react-bootstrap";从react-router-dom"导入{链接};类 NavMenu 扩展组件 {使成为() {返回 (<Navbar bg='light' expand='lg'><Navbar.Brand>公司名称</Navbar.Brand><Nav className='mr-auto'><导航链接><链接到='/'>主页</链接></导航链接><导航链接><Link to='/contact'>联系方式</Link></导航链接></导航></导航栏>);}}导出默认导航菜单;
I am trying to use the react-dom-router
package within my React app but I am not being "redirected" successfully to the component. It only works when I refresh the page or access via the URL.
This is my 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;
This is my NavbarMenu component's code:
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;
I guess the code for Home & Contact components aren't relevant.
So, when I visit my React app default page http://localhost:3000/
I see the navbar with their links. But when I click in a link, the URL changes but nothing happens until I refresh the page or access from the URL.
I was following this tutorial to get this done. Any ideas?
Its s because you are using Router
twice, first in App.js
and then again in NavMenu
. We only need to wrap the App container (entry point) with Router
.
Remove the <Router>
from NavMenu
component. Write it like this:
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 DOM 路由器重定向的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!