I am using react and react-router do we have any replacement of window.location.assign or any other window method for redirection in react or react-router? I want to redirect to some other website. Not on the same react website from which I am redirecting.
I found this answer How to emulate window.location with react-router and ES6 classes but it is redirecting to some other page in the react application only so, this is not sufficient for me.
I am using react-router v4+
I think you want to redirect third party URLs
location.assign(<Your URL>);
example:
location.assign("https://google.com")
Have you tried using the history package, after installing history package,
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
history.push('www.abc.com');
history.go(0);
Related
Is there any way to use React Router on pure HTML like React on the browser?
Example:
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
React Router is beneficial for React Single Page Apps. Using it in pure HTML files isn't necessary. Here's a nice summary of React Router's purpose.
React Router, and dynamic, client-side routing, allows us to build a single-page web application with navigation without the page refreshing as the user navigates. React Router uses component structure to call components, which display the appropriate information.
The code example you shared hints at interest in using React from CDN rather than installing the library in your project. If that's the case, it may help to review the post Using React Router with CDN and without webpack or browserify.
I m new to react, having some problems with build and uploading project.
If I upload with out adding react-router-dom it works fine, but when i upload files from build folder after importing react-router-dom, blank page appears
but there are not any errors in console. Files and codes are visible from the source tab from Developer tools.
Note: With out react-router-dom all the html renders in browser. Also I have added /folder-name/static....(for chunks and manifest)
This is the code to import react-router-dom
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
No any error messages in console.
Install both react-router and react-router-dom.
Got my answer on github page, was not aware of basename for BrowserRouter.
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/BrowserRouter.md
I can't find any tutorial showing how to add React Router to an existing create-react-app. All of them show how to do it when you start a fresh create react app. How do I add it to the half finished create-react-app I'm working on?
1.install react-router-dom (v4).
import {Switch,Route,Link} from 'react-router-dom';
import BrowserHistory,
now you can use Switch Route Components to play with routing.
Both have Route, Link, etc. When to use one or the other? I'm really confused on where to use each one. Server side? Client side?
https://reacttraining.com/react-router/
In some examples you need to pass the history, in others not. What to do?
<Router history={browserHistory}>
vs
<Router>
It's really confusing on when to use one or the other, any help appreciated.
react-router contains all the common components between react-router-dom and react-router-native. When should you use one over the other? If you're on the web then react-router-dom should have everything you need as it also exports the common components you'll need. If you're using React Native, react-router-native should have everything you need for the same reason. So you'll probably never have to import anything directly from react-router. As far as when you use
<Router history={browserHistory}>
vs
<Router>
In RRv4 you won't need to pass down browserHistory, that was just for previous versions of the router.
If you're still confused, you can check out the details on each package here
react-router-dom is a react-router plus:
<BrowserRouter> which is
<Router history={browserNativeHistoryApiWrapper}/>
proof: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js
some Link improvements for browser
proof: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js
and with <NavLink> — wrapper that knows if it's "active" or not
proof: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js
Just use react-router-dom - react-router-dom re-exports all of react-router. The link on GitHub answer (what's the diff between react-router-dom & react-router?).
In v4, react-router exports the core components and functions.
react-router-dom exports DOM-aware components, like <Link> ( which
renders <a>) and (which interacts with the browser's
window.history ).
react-router-dom re-exports all of react-router's exports, so you
only need to import from react-router-dom in your project.
(Source: GitHub)
Found this in the Github.
Note: This package provides the core routing functionality for React Router, but you might not want to install it directly. If you are writing an application that will run in the browser, you should instead install react-router-dom. Similarly, if you are writing a React Native application, you should instead install react-router-native. Both of those will install react-router as a dependency.
Source: https://github.com/remix-run/react-router/tree/main/packages/react-router
What is the equivalent of Router.create (react-router v0.13) in react-router v1.0?
var router = Router.create({
routes: routes,
location: null // Router.HistoryLocation
});
I want to create a reference for the router to be used outside of the DOM.
router.transitionTo('app');
The code snippet above is the ones in v0.13. Wondering if anyone knows how to write them in react-router v1.0.
I have gone through the documentation of react-router, and I had found the createRoutes function. I had no idea how to use it. Please help me on this.
React Router as of v1.0 is now more modular than that. Things like navigation are functions of a "history" object rather than the router itself, which only handles routing.
To do the equivalent with React Router v1.0, you would instantiate the history object outside the router, then do whatever you want with it. There's more detailed documentation available at the guide for navigating outside of components: https://github.com/rackt/react-router/blob/master/docs/guides/advanced/NavigatingOutsideOfComponents.md.
In v1 Router is a component, the routes are children, and history is a prop:
import { createHistory } from 'history'
import { Router } from 'react-router'
<Router history={createHistory()}>{routes}</Router>
Edit: now I recommend you still install the history module, but import 'browserHistory' from react-router which provides a thin layer on top of it
In your top level component you can access props.history.pushState(state, pathname, query) (further down you'll have to pass it through or use the mixin with createClass or something):
this.props.history.pushState(null, 'contact');
You use a history object for this in v1.0.0 - if you don't pass Router one, it will create one for you.
See Getting Started for how to create a history object and Navigation for how to use it to perform navigation.