Question

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

现在，在此

我的App.js

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

我的 Main.js

 render() {
    return (
      <div>
        <Router history={history}>
          <div>
            {this.props.isFetching && <Loading />}
            <Switch>
              <PrivateRoute exact path="/" component={LandingScreen} />
              <PrivateRoute exact path="/quiz-setup" component={QuizSetupMain} />
              <PrivateRoute exact path="/quiz-questions" component={FetchedQuestionComponent} />
              <Route exact path="/login" component={LoginComponent} />
              <Route exact path="/*" component={NotFound} something="foo" />
            </Switch>
          </div>
        </Router>
      </div>
    )
  }
}

NotFound.js

从'react'导入React；

export default class NotFound extends React.Component {

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

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

Answer 1

您可以添加函数，该函数在Header之后返回Component。

例如：

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将没有标题！

让我知道您是否遇到困难。

Answer 2

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

这个想法是，每个被调用的路由路径都在一个公共组件中导航，该组件根据被调用的组件调用适当的行为。例如-

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

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

因此，从本质上讲，您的代码将如下所示-

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

和<Header/>组件将根据您提出的适当条件在自定义组件中调用

希望它会有所帮助：）

Answer 3

您还可以使用通配符将人们重定向到无法访问路线的找不到页面。

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>
               )

如果没有路由，则React Router添加条件

3 个答案: