Using React.Fragment to report an error

in learning react,redux and other knowledge, I wrote a simple 404 page, as follows

NonExistent.js

import React from "react";

function NonExistent(props) {

    return (
        <div>
            error
        </div>
    )
}

export default NonExistent

Route was used in the call

App.js

import { Route, Link, withRouter, Switch, Redirect } from "react-router-dom";
...
<Switch>
...
    <Route exact path={/error} component={NonExistent} />
...
</Switch>

this makes it possible to display the page normally when you cut to the / error path.

then I heard about the use of React.Fragment, so I changed the page to
NonExistent.js

.
import React from "react";

function NonExistent(props) {

    return (
        <React.Fragment>
            error
        </React.Fragment>
    )
}

export default NonExistent

error was reported when cutting to / error path

React.createElement: type is invalid-- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it"s defined in.

is it possible that this syntax cannot be used in combination with Route?
or did I write something wrong?
it was this mistake that I used both google and Firefox. Ask for advice.

Mar.18,2021

React.Fragment is generally used to handle the cases returned by multiple elements. Fragment itself is not converted to any dom element. It is an empty tag, such as

.
render() {
  return 'error';
}
Menu