当 URL 不匹配任何路由并且 URL 包含 /#/ 时如何使用 ReactJS 显示 404

IT技术 javascript reactjs react-router
2021-05-14 03:42:23

这是我第一次使用 ReactJS 而不是我的项目,但是,我试图将任何不存在的路由重定向到我创建的 404 页面。当输入任何与路由不匹配的 URL 时,除了URL 包含/#/.

例如,这个 URL 将重定向到我的 404 页面:

http://localhost:8080/non-existent-url

但是这个 URL 只会加载我的应用程序的默认路由(主页):

http://localhost:8080/#/non-existent-url

我不知道这/#/是为了什么,看起来该应用程序将显示带有或不带有它的有效路由的页面。

精简路由文件:

import React from "react";
import { Router, Route, IndexRoute, browserHistory, hashHistory, Redirect } from "react-router/es";
import willTransitionTo from "./routerTransition";
import App from "./App";
import DashboardContainer from "./components/Dashboard/DashboardContainer";
import DashboardAccountsOnly from "./components/Dashboard/DashboardAccountsOnly";
import NotFound from './components/NotFound';

const history = __HASH_HISTORY__ ? hashHistory : browserHistory;

class Auth extends React.Component {
    render() {return null; }
}

const routes = (
    <Route path="/" component={App} onEnter={willTransitionTo}>
        <IndexRoute component={DashboardContainer}/>
        <Route path="/auth/:data" component={Auth}/>
        <Route path="/dashboard" component={DashboardContainer}/>

        <Route path='*' exact={true} component={NotFound} />
    </Route>
);

export default class Routes extends React.Component {
    render() {
        return <Router history={history} routes={routes} />;
    }
}

404 (NotFound) 组件:

import React from 'react';
import {Link} from "react-router/es";
import Translate from "react-translate-component";

var image = require("assets/404.png");

const NotFound = () =>

    <div className="grid-block main-content wrap regular-padding">
        <div className="grid-content small-12" style={{marginTop:"200px"}}>
            <div style={{ textAlign:"center"}}>
                <img style={{marginBottom:"1.2rem"}} src={image} />
                <h3>404 page not found</h3>
                <p>This page does not exist.</p>
                <Link className="button" to={"/dashboard"}>
                    <Translate style={{color:"#fff"}} content="account.home" />
                </Link>
            </div>
        </div>
    </div>

export default NotFound;

当 URL 与任何路由都不匹配并且URL 包含 时,如何将用户重定向到我的 404 页面/#/

4个回答

对于react-router < 4.0

如果要显示错误页面而不更改路径

<Route path='*' exact={true} component={errorcomponent} />

如果要显示错误页面并更改路径

<Route path='/error' component={errorcomponent} />
 // use redirect to  change the Url
<Redirect from='*' to='/error' />

对于react-router 4

保持路径

<Switch>
    <Route exact path="/" component={component} />
    <Route component={errorcomponent} />
 </Switch>

更改网址。

 <Switch>
    <Route path="/comp" component={component} />
   <Redirect to="/error" />
 </Switch>

重定向标签必须放在你在交换机中放置路由标签的任何地方。

根据我在您的代码中看到的内容,尝试在哈希历史记录和浏览器历史记录之间切换是行不通的。当你在任何东西中击中 '/#' 的那一刻,它就会中断并且总是击中你的通用 '/' 路线。

哈希 URL 是一种处理不再是问题的旧方法。有关更多详细信息,请参阅此 SO 问题及其已接受的答案。

做 Twitter、Hash-Bang 之类的链接#!网址

所以是的,除非你有一些疯狂的理由仍然支持 URL 中的哈希,否则删除哈希历史并简单地使用浏览器历史。然后,您在提供的代码示例中定义的路由应该可以工作。

您可以访问location.hash值并将其设置为空白。

但是正如已经很好地描述的那样,这是多年来的标准 http,除非有充分的理由,否则您不应该关心。

您可以看到它就像http://localhost:8080/?non-existent-url这意味着/使用路径参数转到non-existent-url您是否也想重定向?

在创建 URL 时应该避免一些不安全的字符,其中之一是#.

字符“#”是不安全的,应该始终进行编码,因为它在万维网和其他系统中用于将 URL 与可能跟随它的片段/锚标识符分隔开。

服务器在解析路由时将传递之前的字符串#以获得请求的页面,然后如果在#任何不安全字符之后使用字符串指定任何内容,它将被移动到页面的确切片段

因此,在您的字符串中 before#为空,这就是为什么它重定向到/哪个是有效路由并重定向到component App. 由于没有定义片段,这就是为什么什么也没有发生的原因。

为了使它起作用,我们需要告诉在转发请求之前nginx or any other server剥离所有#

在这种情况下,

http://localhost:8080/#/non-existent-url

将被转换为,

http://localhost:8080/non-existent-url

这将解决问题。请参阅此链接以查看如何在 nginx 中重写规则