javascript - React URL 更改但组件不呈现

标签 javascript reactjs react-router jsx

<分区>

如果我通过在浏览器中手动重新加载页面转到“/”或“/details”,一切都很好。

如果我使用导航栏链接转到“/”或“/details”,URL 会更改但内容不会呈现。

我尝试在“/details”路由中使用“exact”关键字,但它是一样的。

React-router-dom:版本:5.1

App.js:

import { BrowserRouter , Redirect, Route , Switch } from 'react-router-dom';
import './App.css';
import Navbar from './Navbar.js'
import Home from './pages/Home'
import Details from './pages/Details';


function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <Switch>
          <Route exact path="/" >
            <Home />
          </Route>
          <Route path="/details" >
            <Details />
          </Route>
          <Route path="*">
            <Redirect to="/" />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

导航栏:

import './Navbar.css'
import { NavLink , Link } from 'react-router-dom'
export default function Navbar() {


  return (

        <header >
            <ul >
                <li><Link to="/">Home</Link></li>
                <li><Link to="/details">Details</Link></li>
                <li><a href="https://www.google.com">Google</a></li>
            </ul>
        </header>

  )
}

最佳答案

升级到 React-router-dom: Version: 5.3.3 因为 Version: 5.1 有 bug。

1.卸载您拥有的任何版本 npm uninstall -s react-router-dom@5.1 npm uninstall -s react-router-dom

2.安装 React-router-dom:版本:5.3.3 npm install -s react-router-dom@5.3.3

或转到此帖子: Click Me to go to Post

关于javascript - React URL 更改但组件不呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72673484/

相关文章:

javascript - 从 iframe 访问父页面的 id 元素

javascript - 选择一个选项后禁用整个选择标签

reactjs - 更新后出错: Cannot resolve module 'react/lib/ReactMount'

javascript - 相邻的 JSX 元素必须包裹在一个封闭的标签中 React Native

javascript - 我可以避免在路由更改时重新渲染父路由处理程序组件吗?

javascript - 我希望我的标题和导航栏位于相同的 border-bottom

javascript - 定义一个已放入 Javascript 函数参数中的变量

javascript - gulp 将 React 模块转换为类错误

javascript - 传递动态参数如何与 React-Router 中的传递 props 一起工作

javascript - react-router-dom 中 location.pathname 和 match.url 的区别?