I have a small React app that when deployed with GH-Pages is loading my error component on page load as opposed to my home page?
Could anyone please explain why this is?
Route
<Router>
<Navbar />
<Switch>
<Route exact path = "/">
<Home />
</Route>
<Route path = "/about">
<About />
</Route>
<Route path = "/cocktail/:id">
<SingleCocktail />
</Route>
<Route path = "*">
<Error />
</Route>
</Switch>
</Router>
Due to the server config of GitHub pages you will need to use the HashRouter in your app. Your GitHub pages url will likely come with a path after the main URL which is why the * is triggered in your route.
To do this all you have to do is replace the router you import right now with HashRouter:
Instead of:
// import { Router, Switch, Route } from 'react-router-dom';
You change it to:
import { HashRouter as Router, Switch, Route } from 'react-router-dom';
The rest of your code can remain as is. (Most likely)
Related
i have a little React app project and i have deployed it in Github. It works, even i am using import { BrowserRouter, Link, Switch, Route } from "react-router-dom"; to routing and works ... for my home component but not for the rest. This is my code: `class App extends React.Component {
render() {
return <div>
<BrowserRouter basename={process.env.PUBLIC_URL}>
<Switch>
<Route exact path ="/" component={Show} />
<Route exact path="/contact" component={Contact}/>
</Switch>
</BrowserRouter>
</div>
}
}
export default App;`
I have used this in local machine without the "basename" and worked. Now, in the github server my problem is that it is currently showing my first component when you visit my app main url but is not working for the other component, "/contact". I am not sure if i have to use the '<Link to ' property. Anyway, i just want to know why is working for my main url path (https://namegithub.github.io/main-path/) but not for any other path (https://namegithub.github.io/main-path/contact).
Sorry is a dummy question but actually i am just giving my first steps in React.
Thanks!
you can you this code
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom'
return <div>
<Router basename={process.env.PUBLIC_URL}>
<Switch>
<Route exact path ="/" component={Show} />
<Route exact path="/contact" component={Contact}/>
</Switch>
</Router>
</div>
I am confused. Still learning Reactjs though and I am having this issue. I uploaded my react app to github pages. The only thing not working is the homepage on load. I mean, when I visit the site link, it doesn't display the homepage except I click the homepage link on the navigation bar.
However, while on my local machine, the home page works fine onload. No issues at all. I am still a novice and will appreciate any help rendered. Here is my code.
import Single from './pages/single/single'
import Home from './pages/home/home'
import TopBar from "./components/topbar/TopBar";
import Write from './pages/write/write'
import Settings from './pages/settings/settings'
import Login from './pages/login/login'
import Register from './pages/register/register'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
function App() {
const user = false;
return (
<Router>
<TopBar/>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/register">
{ user? <Home/> : <Register />}
</Route>
<Route path="/login">
{user? <Home/> : <Login />}
</Route>
<Route path="/write">
{user? <Write /> : <Register/>}
</Route>
<Route path="/settings">
{user? <Settings />: <Register/>}
</Route>
<Route path="/post/:postId">
<Single />
</Route>
</Switch>
</Router>
);
}
export default App;
Is there anything that I am doing wrong here?
You can try to update your import HashRouter instead of BrowserRouter
import { HashRouter } from "react-router-dom";
Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html. You can find a detailed explanation of this technique in Here is the proper documentiotion to deploy SPA using at github pages Link
I am using router version 5.2 and I am trying to make routes in file app.js.
My routes look like this:
import React from 'react';
import { render } from 'react-dom'; // if you use just render()
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
ReactDOM.render(
<Router>
<div>
<Switch>
{/* Using the `component` prop */}
<Route exact path="/" component={Homepage} />
<Route path="/display-item" component={DisplayProduct} />
<Route path="/category/:id" component={DisplayCategory} />
<Route path="/product/:id" component={OneProduct} />
<Route path="/checkout" component={CheckOut} />
<Route path="/orderPlaced" component={OrderPlaced} />
</Switch>
</div>
</Router>,
document.getElementById('crud-app'),
);
Problem is that only route / is working. So only home page is displayed.
When I try to go to http://localhost:8000/#/display-item nothing happens. So I am still on homepage and I don't have any warnings or errors in console.
If I go to http://localhost:8000/display-item then I get error GET http://localhost:8000/display-item 404 (Not Found)
Please anyone had similar problem? How to solve this?
Thank you!
UPDATE:
The problem was with backend Laravel, beside routes in react, you should define routes in web.php file
Route::view('/', 'welcome');
Route::view('/display-item', 'welcome');
Place the home route as the last statement in switch then it will work. in your code every path matches with '/' so every time it will go to the home route.If you place it at the last then it will search for exact path.
I deployed my react js site. but it can't load pages through url.
it can load homepage https://cekedu.netlify.app/ and when I click sign in it goes to the login page.
but I can't directly go to login page by entering url https://cekedu.netlify.app/login.
but it works in development.
import React from 'react'
import './css/typicons.min.css'
import ReactDOM from 'react-dom'
import User from './components/user'
import Header from './components/homeHeader'
import Home from './components/home'
import {Route, BrowserRouter as Router , Switch,Link} from 'react-router-dom'
import './index.css'
import './css/style.css'
import './css/bootstrap-grid.css'
class App extends React.Component{
render(){
return(
<Router>
<Switch>
<Route path="/login">
<User/>
</Route>
<Route path="/">
<Home/>
</Route>
</Switch>
</Router>
)
}
}
ReactDOM.render(<App />,document.getElementById('root'));
You need to make sure that all paths respond with your the index.html page that your React app is used in.
For netlify, create a file named "_redirects" in the public foler and add this.
/* /index.html 200
You can also try by using "exact" prop in Route of Home component.
<Route exact path="/">
<Home/>
</Route>
Add "exact" prop to Route which it's path is also included by another Route's path.
For example home path '/' is included in all paths so it needs to have exact keyword to differentiate it from other paths which start with '/*'.
<Router>
<Switch>
<Route path="/login">
<User/>
</Route>
<Route exact path="/">
<Home/>
</Route>
</Switch>
</Router>
I'm new to React and React Router. I'm using React Router v4 and following a tutorial based on previous versions - but I made it work (using some stuff found on SO and some stuff on the react router v4 docs).
There is one thing though that is bothering me.
I have a url http://localhost:3000/#/bugs, which basically loads a list of all my bugs. But I also have possible urls like http://localhost:3000/#/bugs?priority=low&status=open which loads a specific set of urls.
The urls themselves work and do the job as expected.
The werid thing is that whenever I type http://localhost:3000/#/bugs?priority=low&status=open (or any params), the component do their jobs but the URL address bar shows http://localhost:3000/#/bugs (although the rendering shows everything related to priority and status shown).
Somehow, the URL location bar is changed but I don't understand why.
Here is my App.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BugList} from './BugList';
import {Redirect} from 'react-router';
import {HashRouter as Router, Route} from 'react-router-dom';
const NoMatch = React.createClass({
render : function (){
return(
<h2>This path does not exist</h2>
);
}
});
ReactDOM.render(
(
<Router>
<div>
<Route path='/bugs' component={BugList}/>
<Route path='/bugs/priority/:priority' component={BugList}/>
<Redirect from='/' to="/bugs" />
<Route path="*" component={NoMatch} />
</div>
</Router>
),
document.getElementById('main')
);
Thanks in advance.
EDIT 12th of April. Despite of the precious help of someone below, this is still not solved. I tried using Switch inside a Router but it doesn't work at all (nothing is shown). So the problem is still happening, and this is the current state of my App.js, using react-15.5.3, react-dom-15.5.3, react-router-4.0.0 and react-router-dom-4.0.0....
import React from 'react';
import ReactDOM from 'react-dom';
import {BugList} from './BugList';
import BugEdit from './BugEdit';
import {Redirect} from 'react-router';
import {HashRouter as Router, Route} from 'react-router-dom';
const NoMatch = React.createClass({
render : function (){
return(
<h2>This path does not exist</h2>
);
}
});
ReactDOM.render(
(
<Router>
<div>
<Redirect from='/' to="/bugs" />
<Route path='/bugs' component={BugList}/>
<Route path='/bug/:id' component={BugEdit}/>
<Route path="*" component={NoMatch} />
</div>
</Router>
),
document.getElementById('main')
);
The problem is that even if you enter the URL with query this URL matches Redirect path (since it's just / any URL matches this pattern) so the redirection to /bugs occurs. You have to use Switch (remember to import it) to render only the first <Route> or <Redirect> that matches the URL:
<Router>
<Switch>
<Route path='/bugs' component={BugList}/>
<Redirect from='/' to="/bugs" />
...
</Switch>
</Router>
The problem occured only on page load and not on re-entering the URL because your routing is based on hashes and the browser doesn't reload page when only hash part changes.
Please note that Redirect component in React-Router v4 performs redirection only when it's rendered - it doesn't set up permanent redirection rule so in your case redirection works only on page load. If you'd like your app to always redirect given URL you'd have to define Route for URL you'd like to redirect from and render Redirect:
<Route path='/oldUrl' render={() => (
<Redirect to="newUrl" />
)}/>
Furthermore, React-Router v4 is quite different from v3 so I don't recommend using v3 tutorials - it doesn't make sense.
Building on what Bartek said: if you use Switch, it will go directional from top to bottom and render the first hit, since you moved your redirect to the first position it will always hit that first and then not go to the other routes. Which is why your Switch should look like this imho (untested):
<Router>
<Switch>
<Route path='/bugs' component={BugList}/>
<Route path='/bug/:id' component={BugEdit}/>
<Redirect from='/' to="/bugs" />
<Route path="*" component={NoMatch} />
</Switch>
</Router>
I know its 04/2020, but this will fix your issue.
<Switch>
<Route path='/bug/:id' component={BugEdit}/>
<Route path='/bugs' component={BugList}/>
<Redirect from='/' to="/bugs" />
<Route path="*" component={NoMatch} />
</Switch>
</Router>```