【问题标题】:React-router-dom link route to target page after refresh刷新后 React-router-dom 链接路由到目标页面
【发布时间】:2019-11-28 16:07:53
【问题描述】:

我正在尝试使用 react-router-dom {Link} 导航到不同的页面...但是当我单击每个链接时,浏览器会停留在当前页面上。我需要刷新网页才能转到目标页面。

Image for my Route in index.js file Image for my Link in CourseRow.js

            <td>
                <Link to='/course/2'>
                    {this.props.course.title}
                </Link>

            </td>

如何在不刷新的情况下导航到目标页面

谢谢

【问题讨论】:

  • 你设置正确了吗?
  • 我不太确定是否正确设置,刷新页面后我可以导航到目标页面。而且我没有从控制台收到任何错误消息..
  • 你的路径和你的路由器不匹配,白板和白板带B和b
  • 您要导出 CourseRow 吗?
  • @AngelSalazar 是的,我会导出 courseRow

标签: reactjs react-router


【解决方案1】:

在这里您可以看到基本设置

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <Link to="/first">Go first</Link> <Link to="/second">Go second</Link>
      <Route path="/first" exact component={First} />
      <Route path="/second" exact component={Second} />
    </Router>
  );
}

function First() {
  return <div>First</div>;
}

function Second() {
  return <div>Second</div>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】:

  • 谢谢,当我点击链接时,我设置正确,目标地址出现在我的浏览器地址栏中,但只是不要导航到该地址。
  • 嘿,我刚刚在描述中添加了两张图片。我正在尝试单击每个课程名称并导航到每个课程。现在,它应该把我带到一个空白页。因为我正在关注一个网络教程,所以我确信我不需要刷新我的页面就可以到达目标页面。
  • 如果 URL 被更新并且导航没有发生,你可能需要使用 withRouter HOC,因为你可能有一个 shouldComponentUpdate 在某处返回 false,当我使用 Redux + React Router DOm 时会发生这种情况
最近更新 更多