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

【问题标题】：Redirect from one page to another in react [duplicate]在反应中从一页重定向到另一页[重复]
【发布时间】：2021-06-05 09:00:10
【问题描述】：

我正在尝试从一页 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>

【问题讨论】：

这能回答你的问题吗？ Programmatically navigate using React router

标签： javascript reactjs react-router

【解决方案1】：

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

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

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

【讨论】：

我在 index.js 中添加了并显示一个错误，提示“AddWork”未定义 no-未定义
index.js的代码如下： ReactDOM.render( , document.getElementById('root') ); 。我想确保以正确的方式添加它。
你是不是先在 index.js 页面中这样导入：import AddWork from '.your component path'??
是的，我确实喜欢这个（从'./addWork'导入addWork；）它们在同一个文件夹中。我正在使用类。
导出时请检查addWork组件的拼写。是 addWork 还是 AddWork？

【解决方案2】：

除了指定您的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>

【讨论】：

谢谢@fayez 我尝试将代码更改为您与我共享的代码，但不幸的是，它没有重定向到 addWork 页面。
链接变为/addWork，跳转到addWork的按钮消失，但页面内容与首页内容相同。