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

本文介绍了链接不会使用 React DOM 路由器重定向的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试在我的 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 应用程序默认页面 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 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;