I have some routing issues for my ReactJS application post deploying into a subdirectory in production domain.
I am placing the build files into directory www.xyz.com/folder1/appfolder/ on my website and my homepage attribute in package.json is set to the same path. I have also tried to use manifest.json "start_url": "./dashboard" And my application file has route defined as below
<Route exact path="/" component={DashboardPage} />
Expected: When I run on localhost everything works fine as in the default page is the dashboard page when I visit localhost. But in production when I visit
www.xyz.com/folder1/appfolder/
i expect the dashboard page to load up but it doesn't load but a blank page comes up with all left nav, header, footer with no content. Once I click on Dashboard link in side nav then the page loads up but with this URL
www.xyz.com/appfolder/ (missing folder1 in path)
If I take this below path and visit directly then its broken as well
www.xyz.com/appfolder/
Only when I visit below and then click on side navbar dashboard link then it redirects to just app folder and the page loads up.
www.xyz.com/folder1/appfolder/
Kindly suggest as something really basic is missing due to which I am facing this problem. its a bad user experience.
Set basename prop in your BrowserRouter
<BrowserRouter basename='folder1'>
...routes...
</BrowserRouter>
Try using hashrouter instead of browser router.
So in your app.js (if this is where you have your routes defined)
Change the import like this
FROM
import { BrowserRouter } from 'react-router-dom'
...
<BrowserRouter>
<Switch>
<Route exact path="/" component={DashboardPage} />
....
</Switch>
</BrowserRouter>
TO
import { HashRouter } from 'react-router-dom'
...
<HashRouter>
<Switch>
<Route exact path="/" component={DashboardPage} />
....
</Switch>
</HashRouter>
Related
I have a react page that uses react-router.
When I run the app locally, I am able to redirect the default path to a specific component. (In my particular case, the '/' redirects to the '/shop' component.)
<Route exact path="/" >
<Redirect to="/store" />
</Route>
However, when I deploy the app to GitHub pages, the default path doesn't redirect to the shop component.
https://vezinaca.github.io/redux-shopping-cart
I've tried adding 'shop' to the "homepage": "http://vezinaca.github.io/redux-shopping-cart/", line of my package.json file but this did not work.
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've used React Router like below:
<BrowserRouter>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/home" component={HomeComponent}/>
</Switch>
</BrowserRouter>
When I use this.props.history.push("/home") or http://localhost:3000/home page is Moving to Home page, but the url is still http://localhost:3000/.
Routing is working and I am able to navigate to all pages, but in the Top URL bar it is showing http://localhost:3000/ always.
Any Idea why this happens?
Please check whether u have implemented any createBrowserHistory, if its there please remove it (assuming it's an implementation issue).
Try adding the BrowserRouter to your index.js instead of adding in the inner component.
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.querySelector('#root'));
I've been having problems with deploying my react app on github.io
I always have my 404 page loaded whenever I start the link: myname.github.io/myapp
Then if I click on /saved, it redirects to the right 'saved' page but if I click on any 'topic' page, it loads the 404 page again with the url: myname.github.io
I've added: gh-pages, added scripts and run npm run deploy following this instruction.
I've also added path={process.env.PUBLIC_URL + '/'} but nothing works.
Here's my app.js:
import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Home from './pages/Home';
import Saved from './pages/Saved';
import Topic from './pages/Topic';
import Result from './pages/Result';
import NoMatch from './pages/NoMatch';
import NavBar from './components/NavBar';
import './App.css';
const App = () =>
<Router>
<div>
<NavBar />
<Switch>
<Route exact path={process.env.PUBLIC_URL + '/'} component={Home} />
<Route exact path={process.env.PUBLIC_URL + '/saved'} component={Saved} />
<Route exact path={process.env.PUBLIC_URL + '/topic'} component={Topic} />
<Route exact path={process.env.PUBLIC_URL + '/result'} component={Result} />
<Route component={NoMatch} />
</Switch>
</div>
</Router>;
export default App;
Update 6 Apr 2018
Adding project name to PUBLIC_URL solves the problem of 404 Homepage.
App.js
<Route exact path={process.env.PUBLIC_URL + '/g4g-debate/'} component={Home} />
However, all other links lead to 404 page. I've tried:
App.js
<Route exact path={process.env.PUBLIC_URL + '/g4g-debate/saved'} component={Saved} />
or
<Route exact path={process.env.PUBLIC_URL + '/saved'} component={Saved} />
or
<Route exact path='/saved' component={Saved} />
On other pages:
<Link to={process.env.PUBLIC_URL + '/g4g-debate/saved/'}>User Profile</Link>
or
<Link to={process.env.PUBLIC_URL + '/saved'}>User Profile</Link>
or
<Link to='/saved'>User Profile</Link>
You can take a look at it here: https://vnndi.github.io/g4g-debate/
You shouldn't need to use process.env.PUBLIC_URL to prefix each route path. The route paths should be relative. I would suggest you remove that.
You did not specify what the value of process.env.PUBLIC_URL is in your question, but I can guess it is myname.github.io?
In any case, the problem you have is because the app is at https://vnndi.github.io/g4g-debate/, but when you click the User Profile link, it goes to https://vnndi.github.io/saved. That route does not match. It should be the following:
https://vnndi.github.io/g4g-debate/saved
So to fix the problem remove the process.env.PUBLIC_URL prefix and just use:
<Route exact path="/saved" component={Saved} />
I know this is an old question and you said you abandoned it, but these for those who are curious:
react-router-dom supports setting a basename on the router object:
<BrowserRouter basename={'/g4g-debate'}>
<Stuff />
</BrowserRouter>
This will automatically set all <Link />'s and <Route />'s to use the basepath at the start of the path, and then you no longer need to include process.env.PUBLIC_URL manually.
As far as the 404 error you were getting, that might also be due to the settings on the github page. I can't speak to github specifically, but a lot of hosting services have a way to set an 'error' page, which is what it will server when the path doesn't correspond to something that doesn't exist. In a one page app with only virtual paths, you need to set the error page to your root index.html file, so that it will server the page and then react-router will handle the actual route.
I am experimenting with react in an Angular app. I am currently using ngReact to load react components in my angular app.
I am using react-router (2.8.1) for a section of my app. I created another section and want to use react-router as well. Unfortunately, I am running into problems, the only Router that works and is recognized is the first router I visit. Here is what I've observed.
Both Routers load when my app loads the homepage. How do I know? I added a property to the Router object and console.logged the properties in the files the routers are created.
If I visit Router A first, Router A works! When I visit the page using Router B, Router B doesn't seem to be recognized and doesn't work, I get the error "Warning: [react-router] Location "/RouteB" did not match any routes". This solution did not work.
Do I need to refactor my routers into a large file that includes all my Routes I use with react-router? It seems like I need to refactor everything or I am missing something.
I am more familiar with backend routing, specifically using express.Router where an instance is created and the router isn't shared.
Here are snippets of my two Routers that are used in different sections of my app.
Router A:
import React from 'react';
import {Router, Route, browserHistory, IndexRoute} from 'react-router';
/* Note, additional import statements for components */
const Routes = () => (
<Router history={browserHistory}>
<Route path="/RouteA">
<IndexRoute component={UserIndex} />
<Route path=":RouteAId">
<IndexRoute component={index} />
<Route path="user" component={user} />
<Route path="profile" component={profile} />
<Route path="preview" component={previewUpdate} />
<Route path="interest/:interestId/resume" component={CoverLetterRoute} />
</Route>
<Route path="*" component={NoMatch} />
</Route>
</Router>
);
export default Routes;
Router B:
import React from 'react';
import {Router, Route, browserHistory, IndexRoute} from 'react-router';
import Main from '../components/Main';
const Routes = () => (
<Router history={browserHistory}>
<Route path="/onboarding" component={Main} />
</Router>
);
export default Routes;
Is it possible to have two separate routers like this? Do I need to load all of my routes into one Router? Please comment if you need more information.
Use a single client-side app with a single router by using different routes. This would allow you to share code more easily, and seamlessly link from one part of the app to the other. You'd have to setup your server to serve the same script for both /users and /onboarding.
var routes = (
<Route handler={App}>
<Route path="/users/welcome" handler={Welcome} />
<Route path="/onboarding">
{/* onboarding routes here */}
</Route>
</Route>
);
2nd option (not recommended though): Use two different entry points each running its own router. This would isolate each of your apps, and you wouldn't be able to transition from one "app" to the other without a server round trip. You'd have to setup your webpack and server so that it serves different (entry) scripts for /users and /onboarding. And for linking to the other app, you'd have to use the normal <a href> instead of <Link to>.