I've tried a few different recommendations, however, none seem to work. I'm using react router V4 and I would like to create a link that navigates to an external website. Currently, everything I do just appends to my URL.
What I want to happen
www.mysite.com => click internal link and go to => www.newsite.com
What is happening
www.mysite.com => click internal link and go to new page but it appends => www.mysite.com/www.newsite.com
<Link to="http://www.newsite.com">Go to new site</Link>
The solution to this was what #Giri suggested, a simple HTML link.
New site
You can also create your own component as suggested here:
import React from 'react'
import {Link} from 'react-router-dom'
const Anchor = (props) => {
return props.href ?
<a {...props}/>
:
<Link {...props}/>
};
export default Anchor
Related
I've been struggling for the past day to get the react router working correctly for my React Native Web application. Namely, despite following quite a few guides on setting up a catch-all 404 page, the solutions only work from expo start on a local host test. In there, I can type any arbitrary address and activate the 404 page. However, with a deployed web build, the 404 page won't work unless I type /index after the address (www.example.com/index for example). If I type anything else that in theory should bring me to the 404 (such as www.example.com/alkjshdakh or even www.example.com/404), I get the following error in my browser:
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>9C6M8QSYEVZGCEXQ</RequestId>
<HostId>av+kOjxxgyXcIRSdeA7qRzVGuoigeCeiEQyDE/iJoQMYvmTjar4PV2d+3/IPoJO2T+9/NFkbDUs=</HostId>
</Error>
I'd like to reiterate that this only happens in deployed builds, and the 404 catches everything locally. Is there something I'm doing wrong? Or perhaps something I'm missing? My code for the project's App.js is posted below for reference:
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
console.log("Importing....")
//WebPages
console.log("Importing pages");
import MainPage from "./assets/pages/index";
import NotFoundPage from './assets/pages/404';
//export default function App()
class App extends Component {
render() {
console.log("Loading... Pages");
return (
<Router>
<Switch>
<Route exact path = "/" component = {MainPage} />
<Route exact path = "/404" component = {NotFoundPage} />
<Redirect to = "/404" />
</Switch>
</Router>
);
}
}
export default App;
The problem likely isn't in your code, and if you're like me, it's an issue with AWS Amplify (assuming you're using it). To fix it, go to your AWS Amplify Console > Rewrites and Redirects. From there, create a new entry with the following parameters:
Source Address: </^((?!\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>
Target: /index.html
Type: 200 (Rewrite)
Source: #Vinit Khandelwal https://stackoverflow.com/a/63554987/17235602
Answer: useLinkTo directly from the library!
https://reactnavigation.org/docs/use-link-to/
Due to the way we are handling deep links that are behind authenticated routes, we are currently manually parsing deep links. Can you point me to the method(s) that are used by react-navigation internally that parse the deep link so I can use them for my authenticated routes when react-navigation does not handle them for me?
Answer: useLinkTo directly from the library!
https://reactnavigation.org/docs/use-link-to/
import { useLinkTo } from '#react-navigation/native';
// ...
function Home() {
const linkTo = useLinkTo();
return (
<Button onPress={() => linkTo('/profile/jane')}>
Go to Jane's profile
</Button>
);
}
On my project, I'm using React + Next.js. For routes, I use the library next-routes. When you navigate the nested route "{category alias}/filter" the page reloads.
Add route - routes.add ({name: 'products', pattern: '/:noname/filter', page: 'products'})
Link to the route - <Link route="category_alias/filter">Products</ Link>
How to make it work without reloading?
I'm under the impression that you are still using the Link parameter inside the next/link
If that is so, then switch to using the Link object found the file where you export the next-routes
Assuming you have the routes.js file at the root of the project:
Then in a path like pages/test.js
import React from 'react';
import { Link } from '../routes';
export default function() {
return (
<Link route="/category_alias/filter">
<a>Testing the microphone</a>
</Link>
);
}
See https://github.com/fridays/next-routes#on-the-client
UPDATE:
react-navigation web support is done. follow this:
https://reactnavigation.org/docs/en/web-support.html
ORIGIN:
I try to share my code between react-native and web.
when I try react-native-web, it works well.
but there is only one question, how to access the specific screen from URL?
I read the react-navigation docs, there nothing about that.
and react-router-native can catch the web URL,
but it has navigator likes StackNavigator/DrawerNavigator.
and idea about that?
I'm not sure what the case was at the time you posted this question, but you definitely can use react-navigation with web now adays.
Now with Linking we can Handle deep links in React Native apps on Android and iOS, plus
Enable URL integration in browser when using on web.
The NavigationContainer component takes in a linking prop which allows you to map out your routes.
const linking = {
prefixes: ['https://mychat.com', 'mychat://'],
config: {
screens: {
Chat: 'feed/:sort',
Profile: 'user',
},
},
};
function App() {
return (
<NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
{/* content */}
</NavigationContainer>
);
}
Once we establish what all of the routes or "links" are in our app we can start using Link components to navigate just like in a normal react web application if you used react-router-dom.
import { Link } from '#react-navigation/native';
// ...
function Home() {
return <Link to="/profile/jane">Go to Jane's profile</Link>;
}
These link components should work on both mobile, and web versions.
https://reactnavigation.org/docs/configuring-links/
https://reactnavigation.org/docs/deep-linking/
https://reactnavigation.org/docs/link
I don't think it's possible as ReactNavigation is using an internal state object. Remember, it's mobile framework, it has no concept of URL routing.
I also wanted to point out that even though RN claims web support you will need to be careful with component selection as not all the behaviours are identical (from memory, FlatList does not support touch scroll)
I currently have express set up to serve a static html page where my react components mount to. I'm also using react router because I have nested routes. For example:
I have an App component (green outline). Within that component, I'm rendering a Header component (orange outline) and a Footer component (red outline) and passing in a Review component (blue outline) through this.props.children.
My server.js file (express):
const express = require('express');
const app = express();
app.use(express.static('dist'));
const PORT = process.env.PORT || 3000;
app.listen(PORT, function() {
console.log(`Listening on port ${PORT}...`);
});
My routes.js file (react-router):
import React from 'react';
import ReactRouter, {
Router,
Route,
browserHistory,
IndexRoute,
} from 'react-router';
import App from '../components/App';
import Home from '../components/Home';
import Review from '../components/Review';
import Game from '../components/Game';
const routes = (
<Router history={browserHistory}>
<Route path="/" component={App} >
<IndexRoute component={Home} />
<Route path="/game/:id" component={Game} />
<Route path="/game/:id/review" component={Review} />
<Route path="*" component={Home} />
</Route>
</Router>
);
export default routes;
My question is, I want to be able to make GET/POST requests (GET from the Game component to display all reviews from a db and POST to create a new review from the Review component), but where should that happen? I can't tell if it has to happen in my express routes because it seems to me that all express is doing is rendering the static html page and then react-router is taking over after that with handling which components to display.
Any and all help is greatly appreciated.
For the GET request, you can load initial data in a separate function, than load that data in after the component has mounted using componentDidMount like so:
class Game extends React.Component {
constructor() {
this.state = { data: [] }
}
loadCommentsFromServer() {
$.ajax({
....
}
});
}
componentDidMount() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
}
}
You can do simply have another function for the POST.
I just wanna share my experience, hope it helps. I'm never doing a request on React Route although it can. So, I prefer to perform this action inside component itself on componentDidMount() method, in your case it will be on Game component.
My consideration is to make component reusable, especially if the the component is depends on the request. The benefit when you're implementing request inside the component is your component will automatically call for the request when it mount, wherever you're mounting the component on the route path.
Refers to my experience, you can also make a request on express as server side request, because there are particular condition that need to perform a request handling from server side. Such as handling Cross Origin Resource Sharing (CORS) issue when request to public API from client side, authentication request handling like using OAuth, and more.
If you're request is quite simple, I think request inside the component is sufficient.
Hope it helps. Thank you