在反应中从一页重定向到另一页[重复]

Question

这个问题在这里已经有了答案：

使用 React 路由器以编程方式导航35 个答案

5 个月前关闭。

我正在尝试从一页 App.js 移动到 addWork.js。 我在 App.js 中添加了一个将用户重定向到 addWork.js 的按钮，但奇怪的是页面重定向到同一页面（App.js 界面），但 URL 更改为 addWork。

我在 render() 中使用了以下代码：

<Router>
    <Route>
    <button type="button" id="Add-new-work" > <Link to='/addWork'>Add new work</Link></button>
    </Route>
   </Router>

Answer 1

您需要在 index.js 文件中导入并添加路径。 如下：

    <Route>
      <Route component={AddWork} path='addWork' />   
    </Route>

您没有指定路径，这就是它重定向到同一页面的原因

Answer 2

除了指定你的Route组件外，别忘了在/ Route 中添加exact的内容。 如果您没有这样做并且您的主页路线位于其他路线之上，您将继续导航到主页。

您的代码应与此类似：

    <Router>
        <Route exact path="/">
            <button type="button" id="Add-new-work">
                <Link to='/addWork'>
                   Add new work
                </Link>
            </button>
        </Route>
        <Route path="/addWork">
            you are in the addWork Route!
        </Route>
   </Router>