I am building an external React component/module that has many sublevels/pages and routes. I am using React Router V4. This component will be imported into a host application that itself has it's own routing system. The host app is also using React Router V4.
The component's root view is a grid view of cards and when the user click one of the cards it brings them to a detail view of the card. When the user is on a detail view, the url in the browser should change so that a user can bookmark the url of that page and visit that page later.
How should the routing work between the host application and the component? Should the host app pass in the route schema into the component or should the component and host app have it's own separate routing system. Does anyone have any examples of this?
React Router V4 plays very nicely in this situation. Both apps would need their own top level Router component in order to be able to run standalone. But you could organize the code so you can reuse the main switch statement for the SubModule. The urls on the host application would all be prefixed with /subModule/, i.e. /subModule/foo, and they would just be /foo on the subModule standalone application.
HostApp.jsx
<Router>
<Switch>
<Route path="/other" component={Other} />
<Route path="/subModule" component={SubModuleRouter} />
</Switch>
</Router>
SubModule.jsx
<Router>
<Route path="/" component={SubModuleRouter} />
</Router>
SubModuleRouter.jsx
<Switch>
<Route exact path="/foo" component={FooComponent} />
</Switch>
Related
I have a react site that is set up and being used to share deep links into my react native app. That is all working as expected however I'm trying to redirect people who do not have the app installed to the app store / play store.
The url I'm using for deep linking is the following:
https://example.com/posts/###
Is there a way to target all URLs that end with /posts/### and wildcard the id at the end?
Hosted on firebase, built with React.
Thanks!
Using React Router Redirect I was able to solve the issue!
// example
<Router>
<Switch>
<Redirect from="/posts/*" to="/getApp" />
<Route exact path="/getApp" component={GetAppScreen} />
<Route exact path="/contact" component={ContactScreen} />
...
</Switch>
</Router>
In my React project, I have:
A Login component without header & sidebar components login image
A Dashboard component with a header, a footer and other child components that all render within the dashboard component dashboard image
An Error page component
Question:
How should I construct my router to start from the login page and when I click on login, the router takes me to the dashboard?
I can point you to a nice medium article that also helped me to understand react routing.
https://medium.com/#pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf
For an example what i would do is
<Route path="/" component={LoginPage} />
<Route exact path="/dashboard" component={DashboardComponent} />
<Route path="/dashboard/something" component={AnotherComponent} />
Then inside that DashboardComponent you can add your header and sidebar. And also other components.
If you need routes like
/dashboard/some_other_thing
You have to define the relevent inside the DashboardComponent
I am experimenting with react in an Angular app. I am currently using ngReact to load react components in my angular app.
I am using react-router (2.8.1) for a section of my app. I created another section and want to use react-router as well. Unfortunately, I am running into problems, the only Router that works and is recognized is the first router I visit. Here is what I've observed.
Both Routers load when my app loads the homepage. How do I know? I added a property to the Router object and console.logged the properties in the files the routers are created.
If I visit Router A first, Router A works! When I visit the page using Router B, Router B doesn't seem to be recognized and doesn't work, I get the error "Warning: [react-router] Location "/RouteB" did not match any routes". This solution did not work.
Do I need to refactor my routers into a large file that includes all my Routes I use with react-router? It seems like I need to refactor everything or I am missing something.
I am more familiar with backend routing, specifically using express.Router where an instance is created and the router isn't shared.
Here are snippets of my two Routers that are used in different sections of my app.
Router A:
import React from 'react';
import {Router, Route, browserHistory, IndexRoute} from 'react-router';
/* Note, additional import statements for components */
const Routes = () => (
<Router history={browserHistory}>
<Route path="/RouteA">
<IndexRoute component={UserIndex} />
<Route path=":RouteAId">
<IndexRoute component={index} />
<Route path="user" component={user} />
<Route path="profile" component={profile} />
<Route path="preview" component={previewUpdate} />
<Route path="interest/:interestId/resume" component={CoverLetterRoute} />
</Route>
<Route path="*" component={NoMatch} />
</Route>
</Router>
);
export default Routes;
Router B:
import React from 'react';
import {Router, Route, browserHistory, IndexRoute} from 'react-router';
import Main from '../components/Main';
const Routes = () => (
<Router history={browserHistory}>
<Route path="/onboarding" component={Main} />
</Router>
);
export default Routes;
Is it possible to have two separate routers like this? Do I need to load all of my routes into one Router? Please comment if you need more information.
Use a single client-side app with a single router by using different routes. This would allow you to share code more easily, and seamlessly link from one part of the app to the other. You'd have to setup your server to serve the same script for both /users and /onboarding.
var routes = (
<Route handler={App}>
<Route path="/users/welcome" handler={Welcome} />
<Route path="/onboarding">
{/* onboarding routes here */}
</Route>
</Route>
);
2nd option (not recommended though): Use two different entry points each running its own router. This would isolate each of your apps, and you wouldn't be able to transition from one "app" to the other without a server round trip. You'd have to setup your webpack and server so that it serves different (entry) scripts for /users and /onboarding. And for linking to the other app, you'd have to use the normal <a href> instead of <Link to>.
I'm trying to figure out how to get the account activation link to React.
The Rails API sends an account activation URL as follows:
http://localhost:8080/users/confirm?token=480a476e6be366068dff
I would like to setup a React action that POSTs that token to the API and then a component will render a "account activated" message.
I am currently stuck on 2 issues:
How to directly open the above link in the browser? I'm getting a "Cannot GET /users/confirm" error message. I read that browserHistory is supposed to solve the problem of directly calling React URLs but I'm not sure how to implement it.
How to capture the token from the link? Is "/users/confirm/:token" the correct approach?
routes.jsx:
export default (
<Route history={browserHistory} path="/" component={App}>
<IndexRoute component={HomePage} />
<Route path="/users/login" component={LogInPage} />
<Route path="/users/register" component={RegisterPage} />
<Route path="/users/confirm/:token" component={ConfirmPage} />
</Route>
);
Whatever web server you're using to serve the react code needs to handle that route too. So if you're rendering the html page that bootstraps the react code with rails, add the route to the routes.rb, and have it render the file that loads your bundle.
Now in order to have the token come as a parameter like that:
<Route path="/users/confirm/:token" component={ConfirmPage} />
You'll need to have the rails api direct to it in the same way:
http://localhost:8080/users/confirm/480a476e6be366068dff
If you need to use the query string, update the route in react:
<Route path="/users/confirm" component={ConfirmPage} />
Then in the confirm page, get the token from the query string itself. You can do this in a few ways. I haven't tried it, but I believe react router parses it for you. In the ConfirmPage, access it by:
this.props.location.query.token
Router for Did You have an account? in Material UI ReactJS
handleClickSignIn() {
this.props.history.push("/Register");
}
return(<div><p style={signstyle} > Don't have an account yet?
< a href onClick={this.handleClickSignIn.bind(this)} >Join Register</a>
</p></div>)
I have the following routes defined
<Route path='/' component={App}>
<IndexRoute component={LoginContainer} />
<Route path='landing' component={LandingComponent} />
<Route path='login' component={LoginContainer} />
</Route>
Now when the user clicks a login button on the loginContainer he is directed to the landing page (from the routes /landing). So now the url changes to
http://server:port/landing
Now if I modify a file and save with hot module reloading (web pack dev server) I get an error saying cannot get http://server:port/landing. This is true because there is no such page, how do I fix this problem.
I am using react-router, react-router-redux, and webpack dev server.
You need to enable historyApiFallback in your webpack dev server config.
This will redirect to the index page on a 404 and consequently allow the router to kick in to find your subroute.
For more info for why this is necessary, or some other, more indepth wy around it, see this answer.