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

Question

我部署了react js站点。但是它不能通过url加载页面。

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

但是我不能通过输入url直接进入登录页面https://cekedu.netlify.app/login.

但它在开发中起作用。

从"React"导入Reactimport/css/typesions.min.css'从"react-dom"导入ReactDOM从"导入用户/组件/用户从"导入标头/components/homeHeader'从"导入主页/组件/主页从"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'));

Answer 1

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

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

/* /index.html 200

Answer 2

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

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

Answer 3

添加"精确的"；prop到路由，它的路径也包含在另一个路由的路径中。例如，主路径"/"包含在所有路径中，因此它需要有确切的关键字来将其与以"/*"开头的其他路径区分开来。

<Router>          
<Switch>
<Route path="/login">
<User/>
</Route>
<Route exact path="/">
<Home/>
</Route>
</Switch>              
</Router>