score:16
you can use a tag for external urls,
<a href='https://domain.extension/external-without-params'>external</a>
but also you can provide component like this:
<route path='/external' component={() => { window.location = 'https://domain.extension/external-without-params'; return null;} }/>
score:-1
can easily use a button just do this:
<button onclick={(e) => (window.location = 'https://www.google.com')}>click me</button>
score:0
have on mind that you cannot perform that with <link />
or <navlink />
since they're mainly for routing throughout single page application.
you should use anchor tag instead.
example: <a href="https://www.google.com">google</a>
.
score:1
in case you're using typescript you probably will get the following error with the accepted answer:
type 'string' is not assignable to type 'location'
to fix that you just need to use window.location.href
<route path="/external" component={() => {window.location.href = config.upgrade_url return null }} />
score:3
you can use window.open()
to redirect to any website.
for example:
window.open('https://www.google.com');
implement redirection in your code:
render () {
if(this.islogin) {
return(/* your components*/);
} else {
window.open('https://www.google.com');
return (<div></div>); //render function should return something
}
}
you can also specifies the target attribute or the name of the window, for more details, see w3school tutorial about this function.
Source: stackoverflow.com
Related Query
- Redirect to third party url using react-router-dom
- how to acces url in data using useParam in react router dom
- Redirect not working on React, using react router dom
- Display URL params on page when using react `withRouter` from react router dom
- React Router Dom doesn't redirect but the URL changes
- Url path level by using React Router Dom
- ReactJS - Handle POST requests using react router dom
- How to handle empty URL parameter in react router dom (4.xx)
- How do I initialize third party libraries while using react hooks?
- get parameter value from url using React Router
- Using render in react router dom with a private route
- Using condition for redirecting in react router dom v6
- Using React Router to Redirect to next page after successful login
- Show Sidebar Navigation only at Home using React Router Dom
- React Router always redirect me to a different url
- React router dom redirect problem. Changes url, does not render component
- React router redirect to a deeper url
- Reactjs react router dom useParams not working with dynamic url
- Using React Router DOM Route in Material-UI Breadcrumbs
- Links don't redirect with React DOM Router
- How to redirect to not found page if slug doesn't exist using React Router Dom?
- React Router Dom Redirect needs to refresh the page to work
- how to get params using react router dom v5.0.1
- React Router redirect using alternate route configuration
- "Internal Server Error" when refreshing page or typing URL manually when using React Router
- Redirect to Route from Saga using React Router v6
- How to mock a third party React component using Jest?
- Redirect in React Router Dom v6
- how to show details page using react router dom
- React Router v6 redirect when there are not any url queryString parameters
More Query from same tag
- React event delegation from parent to child
- React: How can I import a Title-Component which will be commonly used
- What is the best place to update the state in ReactJS?
- How to clear input field after clicking submit in react js redux
- react router: pressing back button does not bring user back to previous page
- D3js in a React Component Unit Testing using Jest/Enzyme
- Tailwind background image from api
- Why does eslint throw an error on a require statement?
- this problem TypeError: callback is not a function
- I'm getting this error when trying to read a local JSON file in Kotlin/JS+React. What is going on?
- TypeError _this2.flipBook.getPageFlip is not a function
- Showing error while running nodemon server.js
- Reducer: getting information about value changes at the store
- React handle autocomplete waiting for some time to load dynamic data
- Why does using an arrow function give the updated version of the state in React in comparison to calling the function normally?
- Project layout for single-page app built using Clojurescript and React
- Gatsby JS - Multiple pages pulling in markdown files with different categorys
- JSX Element does not have any construct or call signatures
- HOC as an App Wrapper for React Redux
- React: Reactstrap pagination active not working inside loop
- Click event with react-apexcharts
- Item in array getting deleted from top only
- How to find an element by id in nested arrays
- React - Cannot read property 'question_desc' of undefined
- React monaco editor json schema validation event
- How to set proxy when using axios to send requests?
- Calling a function after updating the state more than 1 time
- npm not allowing me to update React
- DELETE return ERROR 405(Method Not allowed) I'm using React and ASP.Net Core
- Set initial state from navigation props