Simplify coding your react-router-dom
<Routes/>
and <NavLinks/>
by using attributes in your component.
You provide page components containing title
and path
attributes, and pass them to the package as an array. The package will map the pages to a React-Router component and handle setup for both react router-routes and react-router links.
npm install react-page-routes
Install react-router-dom and prepare a context provider in a parent component:
npm install react-router-dom
// index.tsx
import { BrowserRouter } from "react-router-dom";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<BrowserRouter>
<App />
</BrowserRouter>
);
Add both path
and title
attributes to all of your Page Components.
Shop.path = '/shop'
Shop.title = 'Shop Now!'
export default function Shop() {
return <h1>Shop Now Page</h1>
}
The path
will be provided to <Route path={}>
in the Pages
component and <NavLink to={}>
in the NavBar
component.
The title
will be provided to <NavLink>{title}</Navlink>
in the NavBar
component
- Create
Directory.ts
file. - Import the
directory
function. - Import all of your page components
- Invoke the
directory
function, passing all of your page components as props. export default
the results
// Directory.ts
import { routes } from 'react-page-routes'
import Home from './Pages/Home'
import Shop from './Pages/Shop'
export default routes(
Home,
Shop,
// <- add in any additional Page Components here.
)
- Import the
Directory.ts
file from step 2 - Use the
Navbar
for handling<NavLinks/>
- Use
Pages
for handling react-router<Routes/>
// App.tsx
import { Directory } from './Directory'
function App() {
return (
<div>
<Directory.NavBar />
<Directory.Pages />
</div>
)
}
// App.tsx
import { Directory } from './Directory'
const MyCustomPagesMapper = (E) => (
<Route element={<E />} path={'path' in E ? String(E.path) : ''} key={String(E.name)} />
)
const MyCustomNavBarMapper = (E) => (
<NavLink key={E.path.toString()} to={E.path.toString()}>
{E.title}
</NavLink>
)
function App() {
return (
<div>
<Directory.NavBar map={MyCustomNavBarMapper} />
<Directory.Pages map={MyCustomPagesMapper} />
</div>
)
}
Thanks for trying out this package. Additional questions/ideas/suggestions/contributions are welcome. Visit the github repository issues page, please select relevant Labels