react routerエラー

Question

reactRouterを使っているとこで下記のエラーが出てしまいます。
解決方法わかる人がいましたらご教授お願いしたいです。

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<RouteProps>): Route<RouteProps>', gave the following error.
    型 'Element' を型 'ComponentClass<any, any> | FunctionComponent<any> | ComponentClass<RouteComponentProps<any, StaticContext, any>, any> | FunctionComponent<RouteComponentProps<any, StaticContext, any>>' に割り当てることはできません。
      型 'Element' を型 'FunctionComponent<RouteComponentProps<any, StaticContext, any>>' に割り当てることはできません。
        型 'Element' にはシグネチャ '(props: PropsWithChildren<RouteComponentProps<any, StaticContext, any>>, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>' に一致するものがありません。
  Overload 2 of 2, '(props: RouteProps, context?: any): Route<RouteProps>', gave the following error.
    型 'Element' を型 'ComponentClass<any, any> | FunctionComponent<any> | ComponentClass<RouteComponentProps<any, StaticContext, any>, any> | FunctionComponent<RouteComponentProps<any, StaticContext, any>>' に割り当てることはできません。
      型 'Element' を型 'FunctionComponent<RouteComponentProps<any, StaticContext, any>>' に割り当てることはできません。ts(2769)
index.d.ts(87, 3): The expected type comes from property 'component' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<RouteProps>> & Readonly<RouteProps> & Readonly<{ children?: ReactNode; }>'
index.d.ts(87, 3): The expected type comes from property 'component' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<RouteProps>> & Readonly<RouteProps> & Readonly<{ children?: ReactNode; }>'

 <Route
    exact
    path={`${BaseUrl}/${Paths.user}`}
　　// ここでエラーが出る
    component={
    <UserCreate
     CountText={props.minimumLength}
     isUser={props.isuser}
     isUppeCase={props.isuppercase}
     isSymbolCase={props.isymbolcase}
    />
     }
  />

Answer 1

 <Route
    exact
    path={`${BaseUrl}/${Paths.user}`}
    component{() => 
      <UserCreate
       CountText={props.minimumLength}
       isUser={props.isuser}
       isUppeCase={props.isuppercase}
       isSymbolCase={props.isymbolcase}
     />
 </Route>

としたら解決しました

Answer 2

Route の component 属性にはコンポーネントの名前 (つまり UserCreate だけ) しか書けません。
<UserCreate CountText=... /> を書きたければ、次のように子要素にすると良いでしょう。

 <Route
    exact
    path={`${BaseUrl}/${Paths.user}`}>
    <UserCreate
     CountText={props.minimumLength}
     isUser={props.isuser}
     isUppeCase={props.isuppercase}
     isSymbolCase={props.isymbolcase}
    />
 </Route>

Comments

[satodesu]

上記のように書きましたが識別子が必要ですというエラーになってしまします

[hoshi-takanori]

そのエラーはどこで出てますか？ また、エラーメッセージはコピペしてください。

[satodesu]

<UserCreateで出ています。
エラーメッセージ
識別子が必要です。ts(1003)

[hoshi-takanori]

PasswordComplexities のソースがないとどうしようもありません。ってか、今回の質問とは無関係では？

[satodesu]

今回の質問とは無関係とは？？
Route の component 属性にはコンポーネントの名前 (つまり UserCreate だけ) しか書けません。
<UserCreate CountText=... /> を書きたければ、次のように子要素にすると良いでしょう。と言われたので
コードを直したところ識別子が必要です。ts(1003)というエラーメッセージが出たので

[satodesu]

<Route
exact
path={`${BaseUrl}/${Paths.user}`}
<UserCreate
CountText={props.minimumLength}
isUser={props.isuser}
isUppeCase={props.isuppercase}
isSymbolCase={props.isymbolcase}
/>
</Route>

[hoshi-takanori]

今回のソースのどこに PasswordComplexities が出てくるんですか？

[hoshi-takanori]

あ、path={`${BaseUrl}/${Paths.user}`} の後ろに > が抜けてますね。

[satodesu]

PasswordComplexitiesなんてどこに書いてあるでしょうか？
↑自分で書いて間違えていました。すいません。UseCreateです

[satodesu]

>をつけると
それ以降の構文にエラーが出てしまいます。
エラー内容
'Route' の対応する JSX 終了タグが必要です。t