I am using React-Router 6.
I have an app with multiple routes
<Routes>
<Route
path="/"
element={<Main />}
>
<Route
path="dashboard"
element={<div>dashboard</div>}
/>
<Route
path="account"
element={<div>account</div>}
/>
</Route>
<Route
path="login"
element={<Login />}
/>
// ... more routes
</Routes>
Is there a way to display some react component for any URL that ends with /debug
Solutions I can think of:
use search params, but the url would look end with ?debug=true, I'd prefer a simple /debug.
nest a debug route in every route in my Routes component hierarchy, but that's tedious (I have many routes)
Is there a smarter way?
Thank you!
for check the url based on ending of it you can use something like this :
path=":anyPage*/?debug=true
Related
I have have a react project which seems to work fine when I run it on my computer and I run it on a server (AWS Amplify). When I open it on chrome in my iphone I get a bug. The page works fine initially but when I refresh or navigate to another page it only shows a blank page. I am not sure what is causing the error. I use react-router-dom V6
<Routes>
<Route path='/' element={<Home />}></Route>
<Route path='/socials' element={<Social />}></Route>
<Route path='/discover' element={<Discover />}></Route>
<Route path='/pit' element={<Pit />}></Route>
<Route
path='/minting'
element={
<EditorProvider>
<Minting />
</EditorProvider>
}
></Route>
</Routes>
I can switch between login and signup pages seamlessly. However, when I log in (backend is working fine for this purpose) my DOM doesn't refresh. Is this a state/redux issue or is something else going on behind the scenes that I don't understand? My history pushes properly, but I need to manually refresh in order to see the page that I'm supposed to redirect to. Code below is my current react-router setup. I'll paste the actual repos below. (warning: you'll have to delete the rails master.key then run bin/rails credentials:edit to make the backend work)
I've tried different locations for the JSX for my react-router. Currently, the most successful is to locate my react-router in my App.js
<Router>
{!AniTrackerAdapter.isLoggedIn() ? (
<React.Fragment>
<Switch>
<Route
exact
path="/register"
render={routerProps => <SignUp {...routerProps} />}
/>
<Route
exact
path="/"
render={routerProps => <LoginPage {...routerProps} />}
/>
</Switch>
</React.Fragment>
) : (
<React.Fragment>
<Switch>
<Route
exact
path="/anime/:id"
component={routerProps => (
<ShowPage {...this.props.selectedShow} {...routerProps} />
)}
/>
<Route
exact
path="/anime"
render={routerProps => <ShowContainer {...routerProps} />}
/>
</Switch>
</React.Fragment>
)}
</Router>
expected result: when /anime is pushed to history, the action anime series page loads.
actual results atm: blank screen, have to manually refresh to get the anime series page to load
edit: repos needed:
backend: https://github.com/mobrien829/ani-tracker-backend
frontend: https://github.com/mobrien829/ani-tracker
I need to write a Camel route that would send a file to a web service. Before sending the file to the endpoint, I have to query a database for some information and send the file to the endpoint along with additional information. I would also have to move the file to another directory after the entire route has completed. I was able to create the individual parts of the route independently. I wanted to know how I could do this in a single route.
It's your design decision how to do that.
You can have your individual parts as sub-routes (that is my preferable way).
It makes route more functional structured and at least more readable.
Then you can pass your message(file) to them one after another or in parallel by using multicast component.
in XML DSL it will look like:
<route id="main-route">
<from uri="..." />
<!-- DB processing -->
<to uri="direct:db-route-endpoint"/>
<multicast parallelProcessing="false">
<!-- No parallel processing: file will be stored after Web Service call completed
or for parallel parallelProcessing="true" -->"
<to uri="...web service endpoint... "/>
<to uri="direct:store-file-endpoint"/>
</multicast>
</route>
<route id="db-route">
<from uri="direct:db-route-endpoint" />
... DB processing ...
</route>
<route id="store-file-route">
<from uri="direct:store-file-endpoint" />
... save file to another directory ...
</route>
I have create this sample repo that use rails (v4.2.6) with react-rails (v1.6.2) and react-router (v2.0.0-rc5): https://github.com/pioz/rails_with_react_and_react_router_example
In the file app/views/application/react_entry_point.html.erb I render the component MountUp with
<%= react_component('MountUp', {}, {prerender: false}) %>
The component MountUp render my router:
class MountUp extends React.Component {
render() {
return(
<Router history={History}>
<Route path="/" component={App}>
<IndexRoute component={Index} />
<Route path="/contact" component={Contact}/>
<Route path="/about" component={About}/>
</Route>
</Router>
)
}
}
All works fine, but if I change the option prerender: true I get a strange error React::ServerRendering::PrerenderError in Application#react_entry_point:
Encountered error "Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings." when prerendering MountUp with {}
Object.invariant [as default] ((execjs):21983:16)
createHashHistory ((execjs):24108:130)
(execjs):22633:20
wrapDeprecatedHistory ((execjs):25285:61)
createRouterObjects ((execjs):25259:23)
componentWillMount ((execjs):25228:38)
ReactCompositeComponentMixin.mountComponent ((execjs):8138:13)
wrapper [as mountComponent] ((execjs):3131:22)
Object.ReactReconciler.mountComponent ((execjs):6583:36)
ReactCompositeComponentMixin.mountComponent ((execjs):8153:35)
/Users/pioz/.rvm/gems/ruby-2.3.0/gems/execjs-2.6.0/lib/execjs/external_runtime.rb:39:in `exec'
...
How can I render this app server side? Is this the right way to do this?
Found a solution: we need two version of the component MountUp: a client version that use browser history and a server version that use a fake memory history. Here the two version of the component:
// client version
class MountUp extends React.Component {
render() {
return(
<Router history={History}>
<Route path="/" component={App}>
<IndexRoute component={Index} />
<Route path="/contact" component={Contact}/>
<Route path="/about" component={About}/>
</Route>
</Router>
)
}
}
// server version
class MountUp extends React.Component {
render() {
return(
<Router history={createMemoryHistory(this.props.path)}>
<Route path="/" component={App}>
<IndexRoute component={Index} />
<Route path="/contact" component={Contact}/>
<Route path="/about" component={About}/>
</Route>
</Router>
)
}
}
We need also to create the memory history with the url path equal to the request: to do this we can pass to the component a new prop path with the path of the request:
<%= react_component('MountUp', {path: request.path}, {prerender: true}) %>
I think telling it not to prerender won't help
prerender: false
Also, do as it suggests and grab the dev version so it tells you a bit more
use the non-minified dev environment for the full error message
You are telling it to build the routes based on the History object, which is supposed to say where the user has requested to be (the url). On the server side, you will need to somehow construct an object that will mimic the browser history with one entry: the requested url.
I have done this in node using Redux using this:
import createHistory from 'history/lib/createMemoryHistory';
var reducer = combineReducers(reducers);
const store = compose(
applyMiddleware(promiseMiddleware, thunk),
reduxReactRouter({routes, createHistory})
)(createStore)(reducer, {});
But you will need to take a different approach in order to get the Rails request details into the history store.
A better error message from the dev library is the next thing you need.
So a weird bug that we have came across in Google chrome on IOS. There is a constant redirect loop occurring. We're using React and React-router.
I came across a weird fix which involved me adding a query string at the end - /#/?_k=p8ttt0 - But this isn't something that we want to do as it's an odd looking string and will ruin the other routes.
Here is the some of the code that we're using.
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
import { Router, Route, IndexRoute } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { syncReduxAndRouter } from 'redux-simple-router';
const store = configureStore();
const history = createBrowserHistory();
syncReduxAndRouter(history, store);
render(
<Provider store={store}>
<div>
<Router history={history} onUpdate={() => window.scrollTo(0, 0)}>
<Route path="/" component={SiteContainer}>
<IndexRoute component={HomeLayout} />
<Route path="a" component={HomeLayout} />
<Route path="b" component={HomeLayout} />
<Route path="c" component={HomeLayout} />
<Route path="d" component={HomeLayout} />
</Route>
<Route path="/styleguide" component={StyleguideComponent} />
</Router>
</div>
</Provider>,
document.getElementById('content')
);
Has anyone came across this error before? If so is there a fix for it?
Update 1:
So I found out that replacing createBrowserHistory with createHashHistory fixes this issue but it still uses the ugly hash in the URL. Is there a way around this so I do not have to use this createHashHistory component? I mean what I could do is only use createHashHistory on specific devices (In this case IOS chrome, and any other browser that may have this problem).
I came across a solution in a GitHub issue: https://github.com/rackt/react-router/issues/2565 - Basically this will tell you to update your history module to
"history": "^2.0.0-rc3"
I also updated my React-router module because I had an issue where my react-router version needed to be a specific version to support 2.0.0-rc3
"react-router": "^2.0.0-rc5"