I have a API that works fine, but when i use it with react, the get request goes to
/api/profile/posts/profile/matt
whereas it should go to:
/api/posts/profile/matt
The proxy is set on localhost:8000/api, that works fine for the other APIs when is working with react.
Code for calling the APIs(Only profile one doesn't work, rest all work fine, even the profile one works when I use the absolute URL):
const res = username
? await axios.get("posts/profile/"+username)
: await axios.get("posts/timeline/6120b0e07ea0361eb4982b1c");
code for routes:
function App() {
return (
<Router>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/login">
<Login />
</Route>
<Route path="/register">
<Register />
</Route>
<Route path="/profile/:username">
<Profile />
</Route>
</Switch>
</Router>
)
}
I have similar problem with this user as well: How to prevent React-router from messing up your API url
when you call an API, you need to pass a full path URL to the fetch or axios to work properly, but there are some points that need to be mentioned.
All APIs have two parts: a base URL (which is not changing) + other parts
For example:
https://someAddress.com/api/posts/profile/matt
The base URL is https://someAddress.com/api/ here.
The Axios take a baseURL parameter to call your API's without specifying on every API call:
axios.defaults.baseURL = 'https://somwAddress.com/api/;
Now, simply call your API:
axios.get("posts/profile/" + username)
It requests to the full URL: https://someAddress.com/api/posts/profile/username
You should provide the full URL in axios.get() method.
for example- "HTTP://localhost:port/api_path".
Why only profile API messing with you because you have a profile route mentioned in your router
<Route path="/profile/:username">
<Profile />
</Route>
You are not using any wild card routes if you would have It would create problem with every api
Related
As we all know react router Dom V6 is using Navigate instead of Redirect. I am using Navigate but I don't know how and where i should use this. {user ? : }
I am writing this way
<Route path="/login" element={}>
{user ? : }
Can anyone please tell how should i write this Navigate {user ? : } in my route which is <Route path="/login" element={}>
Edit: For anyone coming here from Google, here is a TLDR: The reason for this "issue" is that React uses client side rendering. A quick solution is to use the HashRouter component, an SEO friendly solution is to use server side rendering(SSR). I switched to using NextJS, an SSR React framework, and my concern is resolved. Pages refresh like normal, and favorites work as intended. Thanks to all in the comments.
Original Question:
I've tried to find the answer to this but maybe i'm not googling well enough. So I have a react app with multiple routes, one of the routes is /reset, I have routing set up in the App.tsx like so:
import { BrowserRouter as Router, Link, Route, Switch} from 'react-router-dom';
class App extends Component<IAppProps, IAppState> {
constructor(props: IAppProps) {
super(props);
this.state = {
loggedin: "false",
user: {
username: "",
email: ""
}
};
}
<Router>
<nav className="topnav">
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About Us</Link></li>
<li><Link to="/faq">FAQ</Link></li>
<li><Link to="/login">Login</Link></li>
</ul>
</nav>
<Switch>
<Route exact path="/">
<Home
text="This text was passed in as a prop"
/>
</Route>
<Route path="/login">
<Login
changeHandler={this.updateLoginInput}
/>
</Route>
<Route path="/register">
<Register
formSubmit={null}
/>
</Route>
<Route path="/forgotpassword">
<ForgotPassword
stateSetter={this.handleChange}
/>
</Route>
<Route path="/reset">
<Home/>
</Route>
</Route>
</Switch>
</Router>
Sorry for the bad indenting, the editor doesn't like tabs.
The links work fine but, when ever i manually type in the address bar localhost:3000/reset it just keeps spinning and eventually times out. Same with every other route in fact. I need this to work because im sending a password reset email that will contain a link to use, and currently it just keeps spinning when the link is clicked. What if someone were to favorite a route on my page like mysite.com/page1? It would keep spinning and then eventually time out.
I've tried to add a route on the server side with app.get() and a response.redirect() and redirect to the reset route, but Chrome blocked it as an unsafe redirect.
Does this functionality not work on localhost or is there something else i'm doing wrong?
I have written a whole application in ReactJS Client Side. I am able to accept /API on my react app URL using <BrowserRouter>
I am looking for a way to make a post request to my React App. Eg. When a user makes a post request to http://myreactapp.com , it should recognize the Post request and get the Post Body received from this call and I want to assign it one of the state before the React App loads.
I tried searching many things on BrowserRouter but I am not able to find 1.
Can someone help me direct towards the way to implement handling POST with body params.
I am open to only suggestions too and and not the whole code since I am kind of stuck thinking what to do next.
render((
<BrowserRouter>
<div>
<Route exact path="/"
render={() => (<App />)} />
<Route path="/find/:find"
render={(props) => (<App {...props} />)} />
</div>
</BrowserRouter>
), document.getElementById('root')
);
I tried with BorwserRouter but it seems it only accepts Get parameters and not Post body.
I have also heard of using NodeJS or express as the backend but can someone help me with modifying my current React code to convert to Express only for Post request and remaining everything remains same,
TIA!
I am building a client application using React and Redux, with server-side API endpoints set-up using Node.
For one feature I would like to send out a token in an email, then upon clicking a link (something like website.com/token?email=dave.example#something.com&token=3ad56gyhg) verify their token/email using a server-side API, before redirecting them to a particular page in React (using React Router).
I anticipate the Node API would look something like this:
app.get('/token', (req, res, next) => {
//code here.....
//goes and checks the email and token code match what is in the database
if (success) {
res.redirect('/welcome');
}
}
Once I've redirected to the appropriate React router endpoint, how do I provide state/props relevant to the user to any components? For example, I might want to use their email address on a page once their token has been verified.
ReactDOM.render(
<Provider store={store}>
<Router history={hashHistory}>
<Route component={App}>
<Route path="/" component={EntryPoint} />
<Route path="/welcome" component={WelcomeContainer} />
</Route>
</Router>
</Provider>,
document.getElementById('root')
);
Would I have to go down the isomorphic route and create a store on the server? Would the component need to go back and get an 'initial state' from the server?
You have a static HTML/CSS/JS server and you have a Node API. In this case, you can't 'template' the HTML that you send to the client. That means that you can only pass data to your react application via URL params.
app.get('/token', (req, res, next) => {
//code here.....
//goes and checks the email and token code match what is in the database
if (success) {
res.redirect(`/welcome/${encodeURIComponent(email)}`);
}
}
Then when your component loads, check for the query param:
ReactDOM.render(
<Provider store={store}>
<Router history={hashHistory}>
<Route component={App}>
<Route path="/" component={EntryPoint} />
<Route path="/welcome/:email" component={WelcomeContainer} />
</Route>
</Router>
</Provider>,
document.getElementById('root')
);
Alternative:
/token redirects to your webapp.
Your react application now picks up the email & token params and then makes an API request to /verify/token with the email & token parameters.
Your application handles the API request (which returns a success/fail) and then redirects internally to /welcome.
This is the way I've usually done this. The key is to make sure that when the user clicks on the verify link, they are taken directly to the webapp. The webapp does the API verification business.
I am building a web application with React and react-router and I would like to protect some routes of my React application with an existing external access management infrastructure (OpenAM).
I would like to protect the http://web.example.com:8080/myapp/#/user-profile url which means that only logged users can have access to this route.
I have some other routes which are public and any user can open them, for example http://web.example.com:8080/myapp/#/welcome.
The Access Management protects urls and if a user wants to open a protected url then a login form is shown by Access Management and after a successful login the original requested url will be displayed.
The problem here is that react-router adds the routing info after the '#' character and the above mentioned two different urls are same from the access manager point of view because they refer to the same web resource (/myapp). The different between these two urls appear after the '#' character.
I need to have real urls without '#' chars like this:
http://web.example.com:8080/myapp/user-profile
http://web.example.com:8080/myapp/welcome
Is there any way to use real url mappings with React?
Do you guys have any idea or workaround how to use real url routes with react?
Thanks.
UPDATE:
This is my code. The urls in the web browser look nice but I get a "about did not match any routes" error. Requested url: http://web.example.com:8080/myapp/about
import {Router, Route, IndexRoute, useRouterHistory} from 'react-router';
import {createHistory} from 'history';
const browserHistory = useRouterHistory(createHistory) ({
basename: '/myapp/'
});
ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" component={MainLayout}>
<IndexRoute component={Home} />
<Route path="about" component={About} />
</Route>
</Router>
)
You could use browserHistory, as suggested in the comments, to get rid of the #-sign. If you want the root of your react-application to be /myapp/ instead of / you can try:
import {Router, Route, useRouterHistory} from 'react-router';
import {createHistory} from 'history';
const browserHistory = useRouterHistory(createHistory)({basename: '/myapp/'});
ReactDOM.render(
<Router history={browserHistory}>
...
</Router>
)