blocks|key|2483474|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2483475|<Route+path="/"+component={Error404}/>|code-block|syntax|javascript|2483476|而不是|2483477|<Route+component={Error404}/>|2483478|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Try: 

<pre><code>&lt;Route path="/" component={Error404}/&gt;
</code></pre>

instead of 

<pre><code>&lt;Route component={Error404}/&gt;
</code></pre>

blocks|key|5835704|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5835705|<Route+render={()+=>+<h1>404+not+found</h1>/>|code-block|syntax|javascript|5835706|将此放在路由的末尾，因为如果什么都没有找到，这将是要处理的最后一个路由。|5835707|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Try this :

<pre><code>&lt;Route render={() =&gt; &lt;h1&gt;404 not found&lt;/h1&gt;/&gt;
</code></pre>

Put this at the end of routes as this will be last route to handle if nothing is found.

blocks|key|2483484|text|您可以很好地处理404Not+Found页面，但不可能在客户端更新标头。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2483485|要更新头部，你必须将它设置为你的后端。例如，如果使用Express，则可以在代码的最后一层编写代码|2483486|app.use((error,+req,+res,+next)+=>+{
++++res.status(404).render('index');
++++//OR
++++res.status(404).sendFile('path/to/index.html')+//+Where+index.html+is+your+entry+point
});|code-block|syntax|javascript|2483487|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You handle well your 404 Not Found page but it is not possible to update headers in your client side.

To update headers you have to set it to your backend. If you use Express for example, you can write at the last level of your code

<pre><code>app.use((error, req, res, next) =&gt; {
 res.status(404).render('index');
 //OR
 res.status(404).sendFile('path/to/index.html') // Where index.html is your entry point
});
</code></pre>

blocks|key|5835730|text|你需要把每个组件放在“layout”标签中。但是如果你有很多路要放，那么最好的方法是这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5835731|import+*+as+React+from+'react';
import+{+Route,+Redirect,+withRouter+}+from+'react-router-dom';

import+SessionManager+from+'../../../session/session-manager';

class+AppRoute+extends+React.Component<any>+{

++++/**
+++++*+Constructor
+++++*+
+++++*+@param+{*}+props
+++++*+@memberof+AppRoute
+++++*/
++++constructor(props:+any)+{
++++++++super(props);
++++}

++++/**
+++++*+Component+will+mount+callback
+++++*
+++++*+@memberof+AppRoute
+++++*/
++++public+componentWillMount():+void+{
++++++++SessionManager.getInstance().loadSession();
++++}

++++/**
+++++*+Render
+++++*
+++++*+@returns+{JSX.Element}
+++++*+@memberof+AppRoute
+++++*/
++++public+render():+JSX.Element+{
++++++++const+{+private:+isPrivate,+layout:+Layout,+component:+Component,+...rest+}+=+this.props;

++++++++if+(isPrivate+===+true)+{
++++++++++++return+(
++++++++++++++++<Route
++++++++++++++++++++{...rest}
++++++++++++++++++++render={props+=>+SessionManager.getInstance().isValidSession()+?+(<Layout><Component+{...props}+/></Layout>)+:+(<Redirect+to={{+pathname:+'/login',+state:+{+from:+this.props.location+}+}}+/>)}
++++++++++++++++/>
++++++++++++)
++++++++}+else+{
++++++++++++return+(
++++++++++++++++<Route+{...rest}+render={props+=>+(
++++++++++++++++++++<Layout>
++++++++++++++++++++++++<Component+{...props}+/>
++++++++++++++++++++</Layout>
++++++++++++++++)}+/>
++++++++++++)
++++++++}
++++}
}

export+default+withRouter(AppRoute);|code-block|syntax|javascript|5835732|在我的例子中，我利用这个机会添加了路由保护。|5835733|最后：|5835734|<Switch>
++++<Route+exact={true}+path="/login"+component={LoginModule}+/>
++++<AppRoute+exact={true}+path="/"+layout={MainLayout}+private={true}+component={DashboardModule}+/>
++++<AppRoute+exact={true}+path="/dashboard"+layout={MainLayout}+private={true}+component={DashboardModule}+/>
++++<AppRoute+exact={true}+path="/players"+layout={MainLayout}+private={true}+component={PlayersModule}+/>
++++<Route+component={NotFound}+/>
</Switch>|5835735|致以问候。|5835736|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You need to put each component within 'layout' tag. But if you have many routes to put, then the best way is do something like this:

<pre><code>import * as React from 'react';
import { Route, Redirect, withRouter } from 'react-router-dom';

import SessionManager from '../../../session/session-manager';

class AppRoute extends React.Component&lt;any&gt; {

 /**
 * Constructor
 * 
 * @param {*} props
 * @memberof AppRoute
 */
 constructor(props: any) {
 super(props);
 }

 /**
 * Component will mount callback
 *
 * @memberof AppRoute
 */
 public componentWillMount(): void {
 SessionManager.getInstance().loadSession();
 }

 /**
 * Render
 *
 * @returns {JSX.Element}
 * @memberof AppRoute
 */
 public render(): JSX.Element {
 const { private: isPrivate, layout: Layout, component: Component, ...rest } = this.props;

 if (isPrivate === true) {
 return (
 &lt;Route
 {...rest}
 render={props =&gt; SessionManager.getInstance().isValidSession() ? (&lt;Layout&gt;&lt;Component {...props} /&gt;&lt;/Layout&gt;) : (&lt;Redirect to={{ pathname: '/login', state: { from: this.props.location } }} /&gt;)}
 /&gt;
 )
 } else {
 return (
 &lt;Route {...rest} render={props =&gt; (
 &lt;Layout&gt;
 &lt;Component {...props} /&gt;
 &lt;/Layout&gt;
 )} /&gt;
 )
 }
 }
}

export default withRouter(AppRoute);
</code></pre>

In my case, I took the opportunity to add route protection.

Finally:

<pre><code>&lt;Switch&gt;
 &lt;Route exact={true} path="/login" component={LoginModule} /&gt;
 &lt;AppRoute exact={true} path="/" layout={MainLayout} private={true} component={DashboardModule} /&gt;
 &lt;AppRoute exact={true} path="/dashboard" layout={MainLayout} private={true} component={DashboardModule} /&gt;
 &lt;AppRoute exact={true} path="/players" layout={MainLayout} private={true} component={PlayersModule} /&gt;
 &lt;Route component={NotFound} /&gt;
&lt;/Switch&gt;
</code></pre>

Regards.

I use react router v4. So i am trying to return (IF it is possible) a status code 404 at the headers my code is here

<pre><code>export default class App extends Component {
 displayName = App.name

render() {
 return (
 &lt;Layout&gt;
 &lt;Switch&gt;
 &lt;Route exact path='/' component={Home} /&gt;
 &lt;Route path='/sitemap/:S' component={SiteMap} /&gt;
 &lt;Route path='/videos' component={Videos} /&gt;
 &lt;Route path='/contact' component={Contact} /&gt;
 &lt;Route path='/privacy' component={Privacy} /&gt;
 {/*&lt;Route path='/errorpage' component={Error404} status={404} /&gt;*/}
 &lt;Route component={Error404}/&gt;
 &lt;/Switch&gt;
 &lt;/Layout&gt;
 );
 }
}
</code></pre>

How to return 404 status code when URL does not match at ReactJS

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我使用react路由器v4。所以我试图(如果可能的话)在我的代码的头部返回一个状态代码404export default class App extends Component { displayName = App.namerender() { return ( <Layout> ...

问当URL在ReactJS不匹配时如何返回404状态码
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当URL在ReactJS不匹配时如何返回404状态码EN