Not Found Page React Router V4

问题

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?

回答1:

This is not a valid react router block:

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

You need to actually use React components like Route and Switch (just like you did in the Components themselves). Something like:

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

回答2:

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

来源：https://stackoverflow.com/questions/44349261/not-found-page-react-router-v4

标签

reactjs

react-router

react-router-v4