我们的react应用程序可以完美地在开发模式(本地主机)下运行,但是当我们将其放入heroku服务器时,我们无法直接访问路由。当我们执行history.push({})到我们的路径时,我们得到一个404页面。
您可以在此处查看页面:placemate.herokuapp.com
重现步骤:转至上面的URL,看到它加载。然后将/ login添加到URL栏,您将看到一个404页面。但是,单击标题中的登录名将正确引导您。
这是我们的路由器代码:
import React from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'
import '../../App.css'
import Home from '../../scenes/general/home/Home'
import Login from '../../scenes/general/login/Login'
import Register from '../../scenes/general/register/Register'
import GuestHeader from '../../components/general/header/Header'
const Main = () => (
<main className='main_app'>
<GuestHeader />
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/login' component={Login}/>
<Route path='/register' component={Register}/>
</Switch>
</main>
);
export default Main;
Run Code Online (Sandbox Code Playgroud)
index.js文件:
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
registerServiceWorker();
Run Code Online (Sandbox Code Playgroud) 我有一个用 Primer-react 模板开发的 React 应用程序。它有一个管理仪表板,在仪表板侧面板中有几个路由。我在我的 index.js 中设置了一个 Auth 路由,当我去每条路由时它都运行良好。但是当重新加载页面时,页面显示找不到 404 页面!
我保护来自 AuthRoute 的“/”路径,以便保护以“/”开头的每条路径(我在仪表板内有路由,如“/usertable”、“/users”、“/payments”等)。我不确定错误是否发生在这里,因为有一些路由(仪表板外)应该在没有身份验证的情况下访问,例如“/Signin”。
我假设如果我可以保护仪表板内每条路线的确切路径(如精确路径 =“/usertable”)而不是保护所有“/”路径,404 问题将得到解决!但是当我这样做时,注销后,我可以通过浏览器后退按钮返回仪表板,这会产生另一个问题。我该如何解决这个问题?
索引.js
import React from 'react';
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
import { render } from 'react-dom';
import Auth from './auth';
import AppProvider from './components/AppProvider/AppProvider';
import Dashboard from './containers/Dashboard';
import { ForgotPassword, Signin, ResetPassword } from './pages';
import registerServiceWorker from './registerServiceWorker';
const AuthRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => {
if (Auth.isAuthenticated()) {
return …
Run Code Online (Sandbox Code Playgroud) 所以我有一个部署在 IIS 上的 React 应用程序,我正在使用 React 路由器,我的路由和它们的顺序都很好,一切都在开发模式下本地工作正常,
我的routes.js 文件返回这样的路由:
<Router history={history}>
<Switch>
{/* there are some other routes that are removed from here */}
{/* token is the jwt token for user */}
{!token && <Route path="/Home" component={HomePage} />}
<Route path="/" exact>
{!!token ? <Redirect to="/Dashboard" /> : <Redirect to="/Home" />}
</Route>
<Route path="*" exact component={FourOFour} />
</Switch>
</Router>
Run Code Online (Sandbox Code Playgroud)
我的“未找到页面”有一个 jsx 文件,它返回组件FourOFour,
正如我所说,包括未找到页面在内的所有内容在我的计算机上的开发模式下都显示完全正常。但是当我在 IIS 上部署 React 应用程序时,我的自定义未找到页面不会显示,而是显示 IIS 的默认 404 页面,如何让 ISS 停止扰乱我的路由?
PS:我知道这是服务器的工作来处理 404 等错误,这是默认行为,我也尝试了一些我在网上找到的建议,但其中一些建议毁了一切,有些则不清楚是什么发生,
所以我希望得到 IIS …
我正在重做我的投资组合作为反应。所以对它来说相当新。我在这里面临的问题是,当我将 React 项目托管到服务器时,一切正常,使用路由,在导航时将页面移动到顶部等,但是我观察到当我关闭我的网站时选项卡并尝试直接访问组件。例如,如果我执行“ http://mywebsite.com ”,它就可以工作。但是,如果我执行“ http://mywebsite.com/contact ”,则页面会显示 404,是的,该组件确实存在。这两种方法都适用于本地主机,但不适用于托管服务器 (Hostinger)
我尝试在网上搜索,但找不到任何可靠的答案,StackOverflow 上的许多帖子都说它的服务器相关错误,但没有说明如何修复它。
手动刷新或写入时,React-router url 不起作用
访问 url 中的路由时如何修复 404 not found。(SPA 反应)
react-router-dom 在直接访问 URL 时生成 404,但不在开发中
这就是我的导航链接和路线的设置方式 -
class mainContent extends React.Component {
render() {
return (
<Router>
<div>
<nav id="navbar">
<span>
<NavLink exact to="/">
PRASHANTH KUMAR SRIPATHI
</NavLink>
</span>
<li-item>
<NavLink to="/contact" id="nav-item" className="item">
<i className="fa fa-comments-o" /> Contact
</NavLink>
</li-item>
<li-item>
<NavLink to="/resume" id="nav-item" className="item">
<i className="book icon" /> Resume
</NavLink>
</li-item>
<li-item>
<NavLink to="/portfolio" id="nav-item" className="item">
<i …
Run Code Online (Sandbox Code Playgroud) 我刚刚注意到,在我的反应应用程序中,当用户刷新页面时,网址不起作用。奇怪的是,本地一切正常。我已经使用 create-react-app 创建了该应用程序。我正在阅读React-router url 在刷新或手动写入时不起作用,但由于构建过程是通过 github 操作自动运行的,因此不清楚如何解决这个问题。谁能建议一个快速的解决方案?