Route

Route

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import GlobalStyle from "app/view/style/GlobalStyle";
import { View } from "app/view";
import { Layout } from "app/view/widgets/layout";

const App: React.FunctionComponent = () => {
    return (
        <BrowserRouter>
            <GlobalStyle />
            <Switch>
               <Route
                    path={"/"}
                    render={() => {
                        return (
                            <Layout.TeamWrapLayout>
                                <Route path={"/team"} component={View.TeamView} />
                                <Route path={"/team/:teamId"} component={View.MemberListView} />
                            </Layout.TeamWrapLayout>
                        );
                    }}
                />
         
            </Switch>
        </BrowserRouter>
    );
};

export default App;

subRoute

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import GlobalStyle from "app/view/style/GlobalStyle";
import { View } from "app/view";
import { Layout } from "app/view/widgets/layout";

const App: React.FunctionComponent = () => {
    return (
        <BrowserRouter>
            <GlobalStyle />
            <Switch>
                  <Route path={"/team"} component={View.TeamView} />
         
            </Switch>
        </BrowserRouter>
    );
};

export default App;

使用するビューロジック
import React, { ReactNode, useReducer } from "react";
import { Route } from "react-router-dom";
忘れないで