nicht gefunden Seite Router V4 Reagieren

Question

ich nicht gefunden Komponente auf meine Routen haben wollen

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; 

Ich habe versucht:

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

Aber die NotFound Komponente macht immer, ich will dies nur machen wenn der Benutzer eine falsche URL eingibt. Wie würde ich das in Router v4 reagieren?

Answer 1

Dies ist kein gültiges reagieren Router Block:

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

Sie benötigen Komponenten wie Routen Reagieren tatsächlich nutzen und Switch (wie Sie in den Komponenten selbst getan haben). Etwas wie:

<Switch> 
    <Route exact path='/' component={Home}/> 
    <Route path='/my-work' component={Work}/> 
    <Route path='/blog' component={Blog}/> 
</Switch> 

Answer 2

Sie müssen nur Switch und Route ohne Pfad-Eigenschaft verwenden.

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