如何在URL与任何路由不匹配时以及URL包含/＃/使用ReactJS时显示404 [英] How to display 404 when URL doesn't match any route and when the URL contains /#/ using ReactJS

问题描述

这是我第一次使用ReactJS而不是我的项目，但是我试图将任何不存在的路由重定向到我所做的404页面。当URL包含 /＃/ 时，当任何与路径不匹配的URL输入分开时，我的404页面将按预期显示。

This is my first time using ReactJS and is not my project however, I am trying to redirect any non-existent routes to a 404 page that I have made. My 404 page is currently displaying as intended when any URL that doesn't match a route is entered apart from when the URL contains /#/.

例如，此网址将重定向到我的404页面：

For example, this URL will redirect to my 404 page:

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

但此URL只会加载我应用的默认路由（主页）：

But this URL will only load my app's default route (homepage):

http：// localhost：8080 /＃/ non-existent-url

我不知道 /＃/ 的用途是什么，看来应用程序会显示包含或不包含有效路径的页面。

I don't know what the /#/ is for and it appears that the app will display pages with valid routes with or without it.

剥离路线文件：

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与任何路线不匹配时，如何将用户重定向到我的404页面和当网址包含 /＃/ ？

How can I redirect users to my 404 page when a URL doesn't match any route and when the URL contains /#/?

推荐答案

对于react-router< 4.0

For react-router < 4.0

如果您想显示错误页面而不是更改路径

If you want to display an error page and not change the path

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

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

If you want to display an error page and change the path

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

对于react-router 4

For react-router 4

Keep路径

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

更改网址。

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

无论何时放置路径标记，都必须放置重定向标记。

the redirect tag has to be put whereever you place a route tag insde a switch.

这篇关于如何在URL与任何路由不匹配时以及URL包含/＃/使用ReactJS时显示404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！