using react-router-dom v6

[shivam-sharma7]

import { Component } from "react";
import "@patternfly/patternfly/patternfly.css"
import { Nav, NavItem, NavList, Page, PageHeader, PageHeaderTools } from "@patternfly/react-core"
import { Router, NavLink, Routes, Route } from "react-router-dom"  
import { Provider, useSelector } from "react-redux"
import store, { history } from "./store"
import { isAdminSelector, LoginLogout } from "./auth"
import { initKeycloak } from "./keycloak"
import { UserProfileLink, UserSettings } from "./domain/user/UserSettings"
import TestRuns from "./domain/runs/TestRuns"
import TestDatasets from "./domain/runs/TestDatasets"
import Run from "./domain/runs/Run"
import AllTests from "./domain/tests/AllTests"
import Test from "./domain/tests/Test"
import DatasetComparison from "./domain/runs/DatasetComparison"
import AllSchema from "./domain/schemas/AllSchema"
import Schema from "./domain/schemas/Schema"
import Admin from "./domain/admin/Admin"
import Alerts from "./alerts"
import Changes from "./domain/alerting/Changes"
import Reports from "./domain/reports/Reports"
import Banner from "./Banner"
import TableReportPage from "./domain/reports/TableReportPage"
import TableReportConfigPage from "./domain/reports/TableReportConfigPage"
import NotFound from "./404"
import About from "./About"
 

class App extends Component {
    constructor(props: any) {
        super(props)
        initKeycloak(store.getState())
    }

    render() {
        return (
            <Provider store={store}>
                <Main />
            </Provider>
        )
    }
}

function Main() {
    const isAdmin = useSelector(isAdminSelector)
 
    return (
        <Provider store={store}>
            <Router history={history}>
                <Banner />
                <Page
                    header={
                        <PageHeader
                            topNav={
                                <Nav aria-label="Nav" variant="horizontal">
                                    <NavList>
                                        <NavItem itemId={-1}>
                                            <NavLink to="/">
                                                <img width="24" height="24" src="/logo.png" alt="Horreum Logo" />
                                            </NavLink>
                                        </NavItem>
                                        <NavItem itemId={0}>
                                            <NavLink to="/test" style={{ color: "var(--pf-c-nav--m-horizontal__link--Color)" }}>
                                                Tests
                                            </NavLink>
                                        </NavItem>
                                        <NavItem itemId={1}>
                                            <NavLink to="/schema" style={{ color: "var(--pf-c-nav--m-horizontal__link--Color)" }}>
                                                Schema
                                            </NavLink>
                                        </NavItem>
                                        <NavItem itemId={2}>
                                            <NavLink to="/changes" style={{ color: "var(--pf-c-nav--m-horizontal__link--Color)" }}>
                                                Changes
                                            </NavLink>
                                        </NavItem>
                                        <NavItem itemId={3}>
                                            <NavLink to="/reports" style={{ color: "var(--pf-c-nav--m-horizontal__link--Color)" }}>
                                                Reports
                                            </NavLink>
                                        </NavItem>
                                        {isAdmin && (
                                            <NavItem itemId={4}>
                                                <NavLink to="/admin" style={{ color: "var(--pf-c-nav--m-horizontal__link--Color)" }}>
                                                    Administration
                                                </NavLink>
                                            </NavItem>
                                        )}
                                    </NavList>
                                </Nav>
                            }
                            headerTools={
                                <PageHeaderTools>
                                    <UserProfileLink />
                                    <LoginLogout />
                                    <About />
                                </PageHeaderTools>
                            }
                        />
                    }
                >
                    <Alerts />
                    <Routes>
                        <Route index element={<AllTests />} />
                        <Route path="test/:testId" element={<Test />} />
                        <Route path="run/list/:testId" element={<TestRuns />} />
                        <Route path="run/dataset/list/:testId" element={<TestDatasets />} />
                        <Route path="run/:id" element={<Run />} />
                        <Route path="dataset/comparison" element={<DatasetComparison />} />
                        <Route path="schema" element={<AllSchema />} />
                        <Route path="schema/:schemaId" element={<Schema />} />
                        <Route path="changes" element={<Changes />} />
                        <Route path="reports" element={<Reports />} />
                        <Route path="reports/table/config/:configId" element={<TableReportConfigPage />} />
                        <Route path="reports/table/:id" element={<TableReportPage />} />
                        {isAdmin && <Route path="admin" element={<Admin />} />}
                        <Route path="usersettings" element={<UserSettings />} />
                        <Route path="*" element={<NotFound />} />
                </Routes>
            </Page>
        </Router>
        </Provider>
    )
}

export default App

Getting error

[shivam-sharma7]

@johnaohara @jesperpedersen @willr3 @whitingjr Help!

[whitingjr]

@shivam-sharma7 you have a missing exported History type. Looks like you might have stumbled across this issue. Can you try the workaround mentioned here ?

[shivam-sharma7]

@shivam-sharma7 you have a missing exported History type. Looks like you might have stumbled across this issue. Can you try the workaround mentioned here ?

useHistory() not supported in latest react-router-dom v6

[whitingjr]

@shivam-sharma7 I would add your finding to the issue #50526 to see what's suggested as an alternative.

[shivam-sharma7]

@whitingjr Thanks, but track my branch here master...shivam-sharma7:Horreum:react-router-dom or pull and run it in your machine.

[whitingjr]

@shivam-sharma7 Code you provided is not the same as https://github.com/shivam-sharma7/Horreum/blob/react-router-dom/webapp/src/App.tsx

Besides that I didn't see the error you reported. Instead when building the project I get this.

$ mvn package -DskipTests
.......
[INFO] [io.quarkiverse.quinoa.deployment.packagemanager.PackageManagerRunner] Module not found: Error: Can't resolve 'react-router' in '/home/whitingjr/thebounty/work/redhat/java/Horreum/worktrees/react-router-dom/webapp/src/domain/tests'

[shivam-sharma7]

@whitingjr check once here-master...shivam-sharma7:Horreum:react-router-dom this is code but yeah when i tried above cmd to run then i also got same error and then resolved, Please may you check again?

[shivam-sharma7]

@whitingjr let me know if you find something..?

[jesperpedersen]

You have to resolve these issues yourself