Javascript 如果路由不存在，则响应路由器添加条件

我对react redux是新手。在这里，如果给定的路由不匹配，我将使用以下内容来显示404notfound

现在，在这个

我的App.js

我的Main.js

NotFound.js

从“React”导入React

export default class NotFound extends React.Component {

  render() {
    return (
      <h1>Something Went Wrong</h1>
    );
  }
}

---

现在，当用户点击任何不存在的路由时，它显示404未找到，但它也显示了报头部分。我知道，这是因为我在app.js文件中呈现了header和main，而在main中没有找到，但是如果路由不匹配，有没有办法不显示该header。谢谢

您可以使用动态组件的组件

其思想是，每个被调用的路由路径都通过一个公共组件进行导航，该组件根据被调用的组件调用合适的行为。例如—

              <PrivateRoute exact path="/" component={CustomComponent} />

然后相应地传递道具以确定哪个屏幕必须呈现标题组件

所以，本质上，你的代码看起来是这样的-

class App extends React.Component {
render() {
    return (
        <Provider store={store}>
            <div className="container-fluid">
                <Main />
            </div>
        </Provider>
       )
   }
}

并且该组件将根据您提出的适当条件在自定义组件中调用

---

希望对您有所帮助：

您可以添加函数，该函数在标题后返回组件

例如：

const withHeader = (Component) => {
  return class withHeaderComponent extends React.Component{ render() { return (<div><Header /><Component /></div>)}}
}

创建此函数后，您可以像

<Route exact path="/login" component={withHeader(LoginComponent)} />.

因此，您可以为所需的路由添加标题

<Route component={NotFound}/> 

现在你的404将没有标题

---

如果您遇到困难，请告诉我。

您也可以使用通配符将用户重定向到“未找到”页面。该路径不可访问

import React from 'react';
import { Switch } from 'react-router';
import { BrowserRouter , Route ) from 'react-router-dom;
import NotFound from './NotFound';

const routes = (   
               <BrowserRouter>
                  <Switch>
                     <Route path="*" component={NotFound}/>
                  </Switch>
                </BrowserRouter>
               )

---

请向我们提供未找到的代码component@lellefood更新了问题你唯一需要添加的是你的路线，并在页面不可用时传递你想显示为道具的组件。

<Route component={NotFound}/> 

import React from 'react';
import { Switch } from 'react-router';
import { BrowserRouter , Route ) from 'react-router-dom;
import NotFound from './NotFound';

const routes = (   
               <BrowserRouter>
                  <Switch>
                     <Route path="*" component={NotFound}/>
                  </Switch>
                </BrowserRouter>
               )