未找到页面 React Router V4 [英] Not Found Page React Router V4

查看：62
本文介绍了未找到页面 React Router V4的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在我的路线上有一个未找到的组件

从'react'导入React；从'react-router-dom'导入{路由，开关}；从 'prop-types' 导入 PropTypes；从 './components/home' 导入 Home；从'./components/work/myWork'导入MyWork；从'./components/work/workShow'导入WorkShow；从 './components/shared/navbar' 导入 NavigationBar；从'./components/shared/footer'导入页脚；从'./components/category/categoryShow'导入CategoryShow；从 './components/post/postIndex' 导入 PostIndex；从 './components/post/postShow' 导入 PostShow；从 './components/post/postSearch' 导入 PostSearch；从'./components/tag/tagShow'导入TagShow；从 './components/shared/notFound' 导入 NotFound；const DefaultLayout = ({ component: Component, ...rest }) =>(<路线{...rest} render={matchProps =>(<div><导航栏/><div className="mainContent"><组件{...matchProps}/>

<页脚/>

)}/>);DefaultLayout.propTypes = ({组件:PropTypes.shape.isRequired，});const BlogLayout = ({ component: Component, ...rest }) =>(<路线{...rest} render={matchProps =>(<div><NavigationBar path="blog"/><div className="mainContent"><组件{...matchProps}/>

<页脚/>

)}/>);BlogLayout.propTypes = ({组件:PropTypes.shape.isRequired，});const 工作 = () =>(<开关><路由精确路径="/my-work" component={MyWork}/><Route path="/my-work/:workName" component={WorkShow}/></开关>);const 博客 = () =>(<开关><路由精确路径="/blog" component={PostIndex}/><Route path="/blog/search" component={PostSearch}/><路由精确路径="/blog/:postName" component={PostShow}/><Route path="/blog/category/:categoryName" component={CategoryShow}/><Route path="/blog/tag/:tagName" component={TagShow}/></开关>);const 路由 = (<div><DefaultLayout 精确路径="/" component={Home}/><DefaultLayout path="/my-work" component={Work}/><BlogLayout path="/blog" component={Blog}/>

);导出默认路由；

我试过了:

const 路由 = (<div><DefaultLayout 精确路径="/" component={Home}/><DefaultLayout path="/my-work" component={Work}/><BlogLayout path="/blog" component={Blog}/><BlogLayout path="*" component={NotFound}/>

);

但 NotFound 组件总是呈现，我只希望在用户输入错误 URL 时呈现.我将如何在 react router v4 中执行此操作?

解决方案

你只需要使用没有路径属性的 Switch 和 Route.

const 路由 = (<开关><路由精确路径="/" component={Home}/><Route path="/my-work" component={Work}/><Route path="/blog" component={Blog}/><路由组件={NotFound}/><开关>);

I want to have a not found component on my routes

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import PropTypes from 'prop-types';
import Home from './components/home';
import MyWork from './components/work/myWork';
import WorkShow from './components/work/workShow';
import NavigationBar from './components/shared/navbar';
import Footer from './components/shared/footer';
import CategoryShow from './components/category/categoryShow';
import PostIndex from './components/post/postIndex';
import PostShow from './components/post/postShow';
import PostSearch from './components/post/postSearch';
import TagShow from './components/tag/tagShow';
import NotFound from './components/shared/notFound';

const DefaultLayout = ({ component: Component, ...rest }) => (
  <Route
    {...rest} render={matchProps => (
      <div>
        <NavigationBar />
        <div className="mainContent">
          <Component {...matchProps} />
        </div>
        <Footer />
      </div>
    )}
  />
);

DefaultLayout.propTypes = ({
  component: PropTypes.shape.isRequired,
});

const BlogLayout = ({ component: Component, ...rest }) => (
  <Route
    {...rest} render={matchProps => (
      <div>
        <NavigationBar path="blog" />
        <div className="mainContent">
          <Component {...matchProps} />
        </div>
        <Footer />
      </div>
    )}
  />
);

BlogLayout.propTypes = ({
  component: PropTypes.shape.isRequired,
});

const Work = () => (
  <Switch>
    <Route exact path="/my-work" component={MyWork} />
    <Route path="/my-work/:workName" component={WorkShow} />
  </Switch>
);

const Blog = () => (
  <Switch>
    <Route exact path="/blog" component={PostIndex} />
    <Route path="/blog/search" component={PostSearch} />
    <Route exact path="/blog/:postName" component={PostShow} />
    <Route path="/blog/category/:categoryName" component={CategoryShow} />
    <Route path="/blog/tag/:tagName" component={TagShow} />
  </Switch>
);

const routes = (
  <div>
    <DefaultLayout exact path="/" component={Home} />
    <DefaultLayout path="/my-work" component={Work} />
    <BlogLayout path="/blog" component={Blog} />
  </div>
);

export default routes;

I tried:

const routes = (
      <div>
        <DefaultLayout exact path="/" component={Home} />
        <DefaultLayout path="/my-work" component={Work} />
        <BlogLayout path="/blog" component={Blog} />
        <BlogLayout path="*" component={NotFound} />
      </div>
    );

But the NotFound component always renders, I only want this to render when the user enters an incorrect URL. How would I do this in react router v4?

解决方案

You just need to use Switch and Route without path property. 

const routes = (
    <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/my-work" component={Work} />
        <Route path="/blog" component={Blog} />
        <Route component={NotFound} />
    <Switch>
);

这篇关于未找到页面 React Router V4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆