score:10
in 0.12 in javascript it looks like this:
var router = require('react-router');
var route = react.createfactory(router.route);
var defaultroute = react.createfactory(router.defaultroute);
var notfoundroute = react.createfactory(router.notfoundroute);
react.render((
react.createelement(router, {location: "history"},
route({path: "/", handler: app},
defaultroute({handler: home}),
route({name: "about", handler: about}),
route({name: "users", handler: users},
route({name: "recent-users", path: "recent", handler: recentusers}),
route({name: "user", path: "/user/:userid", handler: user}),
notfoundroute({handler: userroutenotfound})
)
),
notfoundroute({handler: notfound})
)
), document.body);
score:2
i've just finished putting together an experiment repository for doing this https://github.com/ghedamat/reagent-react-router
the main idea is using the new apis that reagent provides since version 0.5.0-alpha3 for interop with react
reagent/reactify-component
let's you use reagent components in react code (which is what the router requires)
and reagent/adapt-react-class
enables the vice-versa.
what i'm attempting to do is wrap components like link
and routerhandler
and use them directly in reagent.
i.e:
[:ul.nav.navbar-nav
[:li
[link {:to "app"} "home"]]
[:li
[link {:to "about"} "about page"]]]
conversely you can pass reagent's components as handlers
to the reactrouter.router
object.
(def routes
(route {:name "app" :path "/" :handler app-page}
(route {:name "about" :path "about" :handler about-page}))
(defaultroute {:handler default-page-meta})))
the implementation is quite simple (and similar to your updated question): https://github.com/ghedamat/reagent-react-router/blob/master/src/cljs/reagent_react_router/react_router.cljs look at the readme for a more in-depth discussion.
it's working so far but could definitely use more inputs/help.
score:5
an example without jx and without using createelement
(which doesn't make sense to me in case of routes):
// this snippet was tested with react 0.13.1
// and react-router 0.13.2
import router from 'react-router';
import app from './components/app';
import inbox from './components/inbox';
const approute = router.createroute({
path: '/',
name: 'app',
handler: app
});
const inboxroute = router.createroute({
name: 'inbox',
handler: inbox,
parentroute: approute
});
// important: you have to export the root route wrapped in array
export default [approute];
Source: stackoverflow.com
Related Query
- Display images in React using JSX without import
- Using React Router with CDN and without webpack or browserify
- Programmatically navigate using react router without duplicating paths
- React Router 1.0 using router.transitionTo() without Navigation mixin
- Using react router without sacrificing performance
- Using JSX in TypeScript without React
- Is it possible to use React Hooks API without using JSX (in typescript)
- Navigating with React router without using links
- React router shows up as undefined, how would I re-route to a certain page without using window.location
- How can I change URL without render using React Router 6?
- How to structure routing in react router dom without using the 'exact' parameter?
- React conditional render based on user selection without using react router dom
- Programmatically navigate using React router
- Programmatically navigate using react router V4
- React Router BrowserRouter leads to "404 Not Found - nginx " error when going to subpage directly without through a home-page click
- You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react
- Can I use jsx without React to inline HTML in script?
- How to mock history.push with the new React Router Hooks using Jest
- Using onBlur with JSX and React
- React router - Update URL hash without re-rendering page
- .eslintrc.js for React 17 and JSX without import 'react'
- How to use React Router on top of Rails router (not using react-rails gem)?
- Using React forwardRef with Typescript generic JSX arguments
- How to pass params into link using React router v6?
- React Router Without Changing URL
- How do I make components in React Native without using JSX?
- How can I pass data using <Redirect> in react router v4?
- React router change url without page reload
- React Router V4 Implement NavLink inside a ListItem using Material UI
- Dynamic breadcrumbs using react router
More Query from same tag
- How to remove HTML tag (not a specific tag ) with content from a string in javascript
- Passing props to Higher-Order Component
- Not able to resolve issue with api of OpenWeatherApi for fetching weather data of a city using City id using axios in Reactjs
- withRouter + connect + i18next not working together. How to fix it?
- Prevent user from entering numbers but keep the alphabetical characters they have already entered
- Adding key value pair (value from an array) to specific objects in an array
- SyntaxError: Unexpected token import - reactjs
- Tutorial: Intro to React - Rerendering the whole collection instead of the most recently changed element
- React / CSS : Nightmode button that dosnt changes my navbar background color
- Deploy static website to Google Cloud made with Gatsby
- In React, can values set in the contructor(props) be overridden? If not, how to set over writable defaults?
- Extract array inside Objects
- npm run build - Failed to compile - Cannot read property 'toLowerCase' of undefined
- "Submit" Button requires two clicks to submit React Js
- Why am I getting "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)..."?
- Centering one component vertically and appbar at top of the screen material UI
- REACT and WebAPI CORS policy issue
- Return a value in React Table
- Dynamically create arrays and push multiple elements into it in the content of a single loop
- Error: [undefined] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
- React useState - file Reader is not updated
- Loop through array of objects, if value exists, return another value
- events.js:173 throw er; // Unhandled 'error' event
- Call React class function from dangerouslySetInnerHtml content
- this.setState does not update state
- How to access Axios error response object in catch clause?
- how to assign each block an Id to differentiate between blocks inside a canvas and fetch data according to that id
- Store typing for Nextjs and Redux
- Hello, I wanted to implement different css fonts in Windows and Mac for same page in web application. Can anyone provide me how can we achieve this
- React Buttons and State - how to avoid too many States?