React router dom is throwing 404 on /blogs/new
But it works fine if i remove the second url like /blogs or any other single / url
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import HomePage from './HomePage';
import Blogs from './Blogs';
import NewBlog from './NewBlog';
const Main = () => {
return (
<BrowserRouter>
<Switch>
<Route exact path='/blogs' component={Blogs} />
<Route path='/blogs/new' component={NewBlog} />
<Route exact path='/' component={HomePage} />
</Switch>
</BrowserRouter>
);
};
export default Main;
The code you have written seems fine. I tried a simple example on code sandbox with react-router-dom and seems to be working just as expected. You can check this out below and see if you are making some typo somewhere in your code -
It's probably possible that you are making some typo in writing your URLs in either the code or the browser because code-wise it seems correct to me.
Related
I think i need to explain a little bit more about my issue.
I have setup a react app and a typeorm backend.
In my react app i set the proxy parameter to 'localhost:3001' which is my backend. (my react app runs on 'localhost:3001').
This works like a charm IN DEVELOPEMENT.
However when it comes to production (for example when i build my react app and serve it with npm serve -l 3000) i am forced to do the proxying myself.
I googled for this and i think the first few answers to this topic showed me that express is the way to go. So i googled more and found a package called 'http-proxy-middleware'.
This is my code:
const { createProxyMiddleware } = require('http-proxy-middleware')
var app = require('express')();
const port = 80;
var apiProxy = createProxyMiddleware('/api', { target: 'http://localhost:3001' });
var normalProxy = createProxyMiddleware('/', { target: 'http://localhost:3000' });
app.use(apiProxy);
app.use(normalProxy);
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
It works but not like i want it to.
When i make a call to 'http://localhost/api' it proxys to my backend.
When i make a call to 'http://localhost/' it proxys to my react app.
Now when i try to call 'http://localhost/db/home' for example it gives me an 404 Error (it should proxy to 'http://localhost:3000').
I think it also has to do with the react dom router package that i use.
Because of that here is the content of my 'App.tsx':
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.css';
import './App.scss';
import MainTab, { IMainTabProps } from './staticTabs/MainTab/MainTab';
import { MainTab as DBMainTab } from './dashboardTabs/MainTabs/MainTab/MainTab';
import Tab404 from './staticTabs/Tab404/Tab404';
import StaticTabsLayout from './staticTabs/StaticTabsLayout';
import DashboardTabsLayout from './dashboardTabs/DashboardTabsLayout';
import Profile from './dashboardTabs/MainTabs/Profile/Profile';
import Settings from './dashboardTabs/MainTabs/Settings/Settings';
function App() {
return (
<Router>
<Switch>
<Route path="/db/home">
<DashboardTabsLayout>
<DBMainTab />
</DashboardTabsLayout>
</Route>
<Route path="/db/me">
<DashboardTabsLayout>
<Profile />
</DashboardTabsLayout>
</Route>
<Route path="/db/settings">
<DashboardTabsLayout>
<Settings />
</DashboardTabsLayout>
</Route>
<Route path="/db/">
<DashboardTabsLayout>
<DBMainTab />
</DashboardTabsLayout>
</Route>
<Route path="/index.html">
<StaticTabsLayout>
<MainTab />
</StaticTabsLayout>
</Route>
<Route path="/verify/:UserID/:VerifyID" component={(props: JSX.IntrinsicAttributes & JSX.IntrinsicClassAttributes<MainTab> & Readonly<IMainTabProps> & Readonly<{ children?: React.ReactNode; }>) => <StaticTabsLayout><MainTab verify={true} {...props} /></StaticTabsLayout>} />
<Route exact path="/">
<StaticTabsLayout>
<MainTab />
</StaticTabsLayout>
</Route>
<Route component={Tab404} />
</Switch>
</Router>
);
}
export default App;
Update
I also tried calling 'http://localhost:3000/db' in my Browser and this gives me also an 404. So i think it could also possibly be that my 'react-router-dom' code doesn't work.
So i found the problem myself.
I had the feeling that it has something to do with the react app it self. So i looked up the deployment section under the create-react-app-website and i found out that i used the serve -l 3000 command in build directory to host my frontend. Then i saw in the documentation that i should use serve -s build -l 3000 outside of my build directory to serve it correctly.
Thanks also to #eol's answer as it probably would be the next thing that might had helped if it wasn't the problem that i had with serve.
Also if your'e problem was the same as mine (with serve) you just need to use a middleware proxy with '/' put no one with '*'. So it would look like this:
const { createProxyMiddleware } = require('http-proxy-middleware')
var app = require('express')();
const port = 80;
var apiProxy = createProxyMiddleware('/api', { target: 'http://localhost:3001' });
var frontendProxy = createProxyMiddleware('/', { target: 'http://localhost:3000' });
app.use(apiProxy);
app.use(frontendProxy);
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
I'm making a multi-pages app with React Router and I'm using Node for the backend.
Node is working on the port 3000 and React on the port 3001.
I have set up a proxy in package.json of the front-end(React).
My API is reachable on localhost:3000/api/
So my get or post from the frontend(port:3001) with axios look like this:
axios.post('api/login/',{data........})
It is working perfectly from a parent path like /item or /example
http://localhost:3001/xxxxxx/ ...
I can reach my /api/login on port 3000.
But from a subpath like http://localhost:3001/another/ex/ or http://localhost:3001/xxxxxx/example/ ... I see in the console the get or post request is sent to http://localhost:3001/xxxxxx/example/api/login
In those cases, the proxy doesn't redirect properly.
I have found the solution to avoid sub path but I would like to know what exactly is happening and what is the solutions?
Thanks in advance for your help!
<Router history={history}>
<NavBar history={history} refresh={this.state.refresh}/>
<Switch>
<Route exact path="/" render={(props) => <MainPage history=
{history} />}/>
<Route exact path="/item" history={history} component=
{ComponentX1} />
<Route exact path="/example" history={history} component=
{ComponentX2} />
<Route exact path='/another/ex' history={history} component=
{ComponentY1}/>
<Route exact path='/xxxxxx/example' history={history} component=
{ComponentY2}/>
</Switch>
<Footer/>
</Router>
I would like to understand what is happening.
Use must have the path as such.
axios.post("/api/login", { ...data }) // Included '/' at the beginning
Also, check if proxy in package.json is as such
...
proxy: 'http://localhost:3000' // not '/' at end.
...
If you have any doubts ping me in comments.
I was using next.config.js to handle my proxy to my API server. and I was facing the same error. Because my API routes were like http://172.17.19.79:8000/api/job/ so I changed my next.config.js to code bellow:
module.exports = {
async rewrites() {
return [{
source: '/api/:path*',
destination: 'http://localhost:8000/api/:path*/'
}]
}
}
I am currently working on creating a boilerplate react application. I have been following these tutorials, but I haven't been able to get past the first tutorial.
I created my app with create-react-app
When I try to run my app, it compiles, but I get an error that says:
TypeError: location is undefined
This error points to the ReactDOM.render( line in this code
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
registerServiceWorker();
If it is relevant, here is my app.js file as well
import React from 'react';
import { Route } from 'react-router-dom';
import { HomePage, LoginPage } from "./components/pages";
import { Grid } from 'react-flexbox-grid';
import 'react-flexbox-grid/dist/react-flexbox-grid.css';
const App = () => (
<Grid fluid>
<Route path='/' exact component={HomePage} />
<Route path='/login' exact component={LoginPage} />
</Grid>
)
export default App;
I've also tried creating a new react app. For the first time, I ejected the app so that I could add css modules, then when I tried to build it again, I used custom react scripts. The problem began about when I ejected the app, but I'm sure if that was the problem because I did rebuild it and copy the src folder over to the new app.
Finally, here is a screenshot of the errors that I am getting.
I've been stuck on this problem for the past 2.5 days, so any help would be greatly appreciated. Thank you so much in advance.
UPDATE: Hey guys. I'm an idiot. The <Link> component uses a to attribute unlike the a tag's href. That was my problem. Really. Well there goes 3 days down the drain and all of your time. Thank you for your help anyway, I appreciate all that you have done.
EDIT - Explanation of the Resolution (as described in #Vishah's answer)
I'm adding an edit here in hopes of helping anyone who comes across this.
The source of the issue was the Links components included "href" attributes instead of "to" attributes.
- <Link href='/'>Home</Link>
+ <Link to='/'>Home</Link>
Additionally, it's worth noting the "href" didn't throw an attribute error because lowercase attributes are still valid dom in React ^16.2.
Here's the commit on his repo: https://github.com/vishalmshah/MERNStackBoilerplate/commit/73fb3fe2e39ffa870fb91bd8b3592887886e3dbb
This was not the source of the issue
I think I see the issue. BrowserRouter uses the location object to keep track of where you are, your history, and possibly other locations the app will navigate to.
BrowserRouter Routes require being given location object which they can use to compare their path value to.
You've got your Route's wrapped by your App object without passing the location object down.
Try passing location through your app:
const App = ({ location }) => (
Subsequently you may have to access the location in the Routes:
<Route location={location} ...
This example is where I got the information from:
https://github.com/Remchi/bookworm-react/blob/master/src/App.js
UPDATE: Hey guys. I'm an idiot. The component uses a to attribute unlike the a tag's href. That was my problem. Really. Well there goes 3 days down the drain and all of your time. Thank you for your help anyway, I appreciate all that you have done.
One thing I notice immediately is how you are importing the components...
import { HomePage, LoginPage } from "./components/pages";
You can not do this... Instead:
import HomePage from './components/pages/HomePage';
import LoginPage from './components/pages/LoginPage';
Also, you should not install react-router but just react-router-dom...
Here is the App.js
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
import LoginPage from './LoginPage';
const App = () => (
<Switch>
<Route path="/" component={HomePage} exact={true} />
<Route path="/login" component={LoginPage} exact={true} />
</Switch>
);
export default App;
And here is the Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root'),
);
registerServiceWorker();
Note: I did not create the pages directory and am also using Switch... (docs: https://reacttraining.com/react-router/web/api/Switch)
Learning React.js and Node.js and making a simple crud app with Express API on the back-end and React.js on the front end.
App.js of my React.js looks like this.
`import React, { Component } from 'react';
import './App.css';
import Rentals from './components/Rentals';
import Idpage from './components/Idpage';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
class App extends Component {
render() {
return (
<div className="mainappdiv">
<Router>
<main>
<Route exact path="/" component={Home} />
<Route exact path="/rentals" component={Rentals} />
<Route path="/rentals/:propertyid" component={Idpage} />
</main>
</div>
</Router>
</div>
);
}}
export default App;
I am making an app that when if you go to /rentals, it will fetch the data and print stuff. This is currently working and all the data from my database is rendering.
Now I am trying to go to /rentals/1 or /rentals/2 then trying to print only listings of that id.
import React, { Component } from 'react';
class Idpage extends Component {
componentDidMount() {
fetch('api/listofrentals/2')
.then((response)=>{
console.log(response)
return response.json()
})
.then((singlerent)=>{
console.log(singlerent)
})
}
render() {
return (
<div>
<p>this is the id page solo</p>
<p>{this.props.match.params.propertyid}</p>
</div>
);
}}
export default Idpage;
When I do this, I get an error saying GET http://localhost:3000/rentals/api/listofrentals/2 404 (Not Found)
I am trying to fetch from the URL http://localhost:3000/api/listofrentals/2 and do not understand why the "rentals" part is in the url.
My React server is running on localhost:3000 and node.js is running on localhost:30001. And my React's package.json has this "proxy": "http://localhost:3001/"
Fetch by default will access a relative path to where you are using it. You can specify you want to bypass the relative path by starting your url with /.
fetch('/api/listofrentals/2')
In case if you want to change the base url for testing. You can turn off web security in Google and use.
In ubuntu command line it is
google-chrome --disable-web-security --user-data-dir
I am trying to get started with react-router.
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './pages/HelloWorld';
import {Router, Route, IndexRoute, hashHistory,browserHistory} from "react-router";
...
const app = document.getElementById('root')
ReactDOM.render(<HelloWorld/>, app);
Here dummy class HelloWorld:
import React, { Component } from 'react';
class HelloWorld extends Component {
render(){
return(<h1> HelloWorld </h1>);
}
}
export default HelloWorld;
Using this setting everything works out fine. However, using routes I end up having a blank page.
ReactDOM.render(
<Router history = {hashHistory}>
<Route path ="/" component={HelloWorld}>
</Route>
</Router>,
app);
Where is the mistake? I searched stackoverflow but no answer seems to be suitable.
Whats really weird for me, is that the following code also results in a blank page:
const Routes = () => (
<Router history = {browserHistory}>
<Route path ="/" render={ () => (<h1> HelloWorld </h1>) } />
</Router>
);
const app = document.getElementById('app')
ReactDOM.render(<Routes/>, app);
You're using using the V4 in a V3 way.
Instead of
import {Router, Route, IndexRoute, hashHistory,browserHistory} from "react-router";
Import dependencies in this way:
import {BrowserRouter as Router, Route} from "react-router";
import createHistory from "history/createBrowserHistory" // browser history moved into a standalone package since v4.
Ok "one" solution is:
import {BrowserRouter as Router, Route, IndexRoute,hashHistory,browserHistory} from "react-router-dom";
...
const Routes = () => (
<Router history = {browserHistory}>
<Route path ='/' component={ Layout } />
</Router>
);
const app = document.getElementById('app')
ReactDOM.render(<Routes/>, app);
99% sure your issue is that your tag has a relative link. Make it absolute.
<!-- do this -->
<script src="/static/bundle.js"></script>
<!-- not -->
<script src="static/bundle.js"></script>
<!-- or -->
<script src="./static/bundle.js"></script