React js路由器在部署时无法通过url正确路由到页面

Posted 2023-02-19

【中文标题】React js路由器在部署时无法通过url正确路由到页面

【英文标题】：React js router not properly route to the page through url when deployed

【发布时间】：2020-08-06 01:28:56

【问题描述】：

我部署了我的 react js 站点。但它无法通过 url 加载页面。

它可以加载主页https://cekedu.netlify.app/，当我点击登录时，它会进入登录页面。

但我无法通过输入 url https://cekedu.netlify.app/login 直接进入登录页面。

但它在开发中有效。

从“反应”导入反应 导入'./css/typicons.min.css' 从 'react-dom' 导入 ReactDOM 从'./components/user'导入用户 从'./components/homeHeader'导入标题 从 './components/home' 导入主页 从'react-router-dom'导入Route, BrowserRouter as Router, Switch,Link

import './index.css'
import './css/style.css'
import './css/bootstrap-grid.css'      

class App extends React.Component    
    render()
      return(
        <Router>          
          <Switch>
          <Route path="/login">
            <User/>
          </Route>
          <Route path="/">
              <Home/>
          </Route>
          </Switch>              
        </Router>
      )
    
  

ReactDOM.render(<App />,document.getElementById('root'));

【参考方案1】：

您需要确保所有路径都响应您使用 React 应用程序的 index.html 页面。

对于 netlify，在公共文件夹中创建一个名为“_redirects”的文件并添加它。

/* /index.html 200

【参考方案2】：

您也可以尝试在 Route of Home 组件中使用 "exact" 属性。

<Route exact path="/"> <Home/> </Route>

【讨论】：

我试过了，但仍然无法在部署的站点中工作。