I deployed one website on localhost, with npm build / react, and I would like to select another landing page.
However I'm a newbie working with React and I don't know where to find the routes for the pages. I have the following codes in the public/Index.html, public/manifest.json, and package.json from root folder.
I tried modifying the homepage in package.json to another folder/.ts/.tsx files but without any success.
Any idea in how to find the routes to other pages and how to set the landing page to them for localhost server ?
you don't touch the public folder for routes, and assuming you want to link to another page like you want to go from / to /about then you need to do this:
this will be your home page - app.tsx
import { BrowserRouter, Routes, Route} from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About/>} />
</Routes>
</BrowserRouter>
);
}
this will be your about file, about.tsx
import { Link } from 'react-router-dom';
function About() {
return (
<div>
<nav>
<Link to="/">Home Page</Link>
</nav>
</div>
);
}
To understand more about routes please check the documentation below
React router V6
Related
I wanted to add multiple pages to my React website so I started using the HashRouter import from react-router-dom. Since then only my main page loads and I am no longer able to use local links in the page. I can't redirect the user to specific areas on the main page which i used to be able to do before I started using the Router import. This website also uses github pages if that affects anything.
I am currently using the <a> tags like this:
<a className="nav-link" href="/#about-me">
About Me
</a>
with the URL appearing as this with no content below it
http://localhost:3000/#about-me
I have also tried using the <Link> tag but it just ends up reloading the page.
<Link className="nav-link" to="/#about-me">
About Me
</Link>
With this URL appearing instead:
http://localhost:3000/#/#about-me
How do I get my page to scroll down to the id rather than reload or load a blank page?
Main code snippets for reference:
Home.js snippet
const Home = () => {
return (
<div className='main'>
<section className='section-welcome'>
<Introduction />
</section>
<section id='about-me' className='section-about-me'>
<AboutMe />
</section>
</div>
);
};
export default Home;
Main.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './Pages/Home.js';
import NoPage from './Pages/NoPage.js';
const Main = () => {
return (
<Routes>
<Route path='/' element={<Home />}></Route>
<Route path="*" element={<NoPage />} />
</Routes>
);
}
export default Main;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router>
<App /> {/* The various pages will be displayed by the `Main` component. */}
</Router>
</React.StrictMode>
);
The problem is with how the code runs with GitHub pages, not the references.
Currently, whenever a link is clicked in the NavBar the website tries to load the URL as root/{href from <a> tag}. This conflicts with GitHub pages as it searches links under the githubname.github.io/project-name/ and the program is trying to display githubname.github.io/#.
In order to fix this, you need to add a basename in the <Router> tag which forces the page to load at /project-name/#.
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router basename={process.env.PUBLIC_URL}>
<App /> {/* The various pages will be displayed by the `Main` component. */}
</Router>
</React.StrictMode>
);
Relevant Links for more info
https://maximorlov.com/deploying-to-github-pages-dont-forget-to-fix-your-links/
https://create-react-app.dev/docs/deployment/#building-for-relative-paths
I am creating a multipage website using React and hosting it on Github pages. The website loads perfectly fine on localhost, but runs into trouble on Github pages when trying to enter a subpage.
The main page displays on Github Pages, but when the subpage link is clicked, Github pages displays the error 404 page.
404
File not found
The site configured at this address does not contain the requested file.
Although this error is shown the URL displays the same way the local host displays it.
Main Page
LocalHost: http://localhost:3000/my-website/ ** Runs Fine **
Github: https://myname.github.io/my-website/ ** Runs Fine **
Sub Page
LocalHost: http://localhost:3000/my-website/project ** Runs Fine **
Github: https://myname.github.io/my-website/project ** Runs into Error **
Relevant Code:
Home.js snippet
<div>
<a href='/my-website/project'>
<img alt='Project 1' src={Sunset} />
</a>
</div>
Main.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './Pages/Home.js';
import Project from './Pages/Project.js';
import NoPage from './Pages/NoPage.js';
const Main = () => {
return (
<Routes>
<Route path='/' element={<Home />}></Route>
<Route path='/project' element={<Project />}></Route>
<Route path="*" element={<NoPage />} />
</Routes>
);
}
export default Main;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router basename={`/${process.env.PUBLIC_URL}`}>
<App /> {/* The various pages will be displayed by the `Main` component. */}
</Router>
</React.StrictMode>
);
Issues
Assuming your package.json file specifies a correct homepage entry, i.e. "homepage": "https://myname.github.io/my-website", there are a couple issues.
Github pages don't work well with the BrowserRouter. Use the HashRouter instead.
Import and use the Link component to link to pages within the app. Using a raw anchor tag is likely sending a page request to the server for a sub-route that doesn't exist. (This is why the HashRouter is necessary, BTW)
Updates
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>
);
home.js
Replace the raw anchor tag and import and use the Link component that links to the "/project" route path.
import { Link } from 'react-router-dom';
...
<div>
<Link to='/project'>
<img alt='Project 1' src={Sunset} />
</Link>
</div>
The solution was best described in this post in addition to doing what Drew Reese has commented.
Use anchors with react-router
In summary:
You need to install react-router-hash-link.
npm install --save react-router-hash-link
Add import { HashLink as Link } from 'react-router-hash-link'; to the page you use the links.
And use it as shown:
<Link className="nav-link" to="/#about-me">
About Me
</Link>
This isn't happening on my local server,
but when I push my create-react-app to gh-pages and try to reload anything besides the home page, or navigate directly to a routed page, the page breaks and the URL repeatedly grows looking like this...
https://hellocentral.live/about/?p=/&q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/....
Here is my file with my routes...
import React from "react";
import "./SiteContainer.scss";
import HeaderContainer from "../HeaderContainer/HeaderContainer";
import { Route, Switch } from "react-router-dom";
import About from "../About/About";
import Home from "../Home/Home";
import Music from "../Music/Music";
import Footer from "../Footer/Footer";
import Merch from "../Merch/Merch";
import Pics from "../Pics/Pics";
import Contact from "../Contact/Contact";
export const SiteContainer = () => {
return (
<div className="site-container">
<HeaderContainer />
<Switch>
<Route path="/about" component={About} />
<Route path="/merch" component={Merch} />
<Route path="/music" component={Music} />
<Route path="/pics" component={Pics} />
<Route path="/contact" component={Contact} />
<Route path="/" component={Home} />
</Switch>
<Footer />
</div>
);
};
export default SiteContainer;
here is my repo
https://github.com/monstaro/hc3/tree/master/src
The site is https://www.hellocentral.live
Any help would be appreciated!
You need to wrap the Switch component in a Router component. To do this, you need to import it from the react-router-dom package:
import { HashRouter as Router } from 'react-router-dom'
...
<Router basename={process.env.PUBLIC_URL}>
<Switch>
...
</Switch>
</Router>
I gave HashRouter as example because GH Pages does not support the other router, BrowserRouter. Probably, MemoryRouter or StaticRouter do work, but I am not sure.
Since your domain is https://www.hellocentral.live, you need to set segmentCount to 0 here.
Guess you're using an older version of rafgraph/spa-github-pages cited in a blog or something. I would recommend updating index.html with the latest version of the script and 404.html with this script.
From the docs,
Note that if you are setting up a Project Pages site and not using a custom domain (i.e. your site's address is username.github.io/repo-name), then you need to set pathSegmentsToKeep to 1 in the 404.html file in order to keep /repo-name in the path after the redirect.
I am new to react and in my app it works fine apart from the fact that when I click on a link in the app to go to another page I get a blank page instead but after I reload/refresh the page contents appear.
I have used CDN files in my react app.
What might be the issue here?
This is how I am loading my urls which look like this
http://127.0.0.1/my-app/?page=history
and the links look like this
<i className="fa fa-home"></i>Home
My code for rendering URL's in my index.html file looks like this
var urlParams = new URLSearchParams(window.location.search);
var page=(urlParams.get('page'));
if(page=="home")
{
ReactDOM.render(<App content={<HomePage/>}/>,document.getElementById('root'));
}
else if(page=="history")
{
ReactDOM.render(<App content={<HistoryPage/>}/>,document.getElementById('root'));
}
else
{
ReactDOM.render(<App content={<Login/>}/>,document.getElementById('root'));
}
That's not the correct way of routing in react according to the documentation.
A simple solution while using cdn is to include react-router-dom from https://unpkg.com/react-router-dom/umd/react-router-dom.min.js
Then enter the code below as a replacement for what you are currently doing:
const { Switch, Route, BrowserRouter } = window.ReactRouterDOM;
ReactDOM.render(<BrowserRouter>
<Switch>
<Route path='/' component={HomePage} exact/>
<Route path='/history' component={HistoryPage} exact/>
<Route path='/login' component={LoginPage} exact/>
<Route component={Error404}/>
</Switch>
</BrowserRouter>,document.getElementById('root'));
You can also check out the documentation at this link
So I've got React Router set up and I'm trying to run it from WordPress.
The app routes correctly as long as you start from the root "/". However if you manually navigate to any subpage via the address bar, React Router seems to only take over from there.
For example.
Hitting / will render the homepage. If you click the link 'style-guide' it will correctly route you to /style-guide and render the page.
However, if you manually navigate to /style-guide in your address bar, react will render the homepage there, and if you now click the style-guide link it will bring you to /style-guide/style-guide
What I need to do is tell react-router to always start from the root URL.
My Routes Look Like this
import {
BrowserRouter as Router,
Route,
Redirect,
Switch,
} from 'react-router-dom'
import PageContainer from 'containers/pageContainer'
class RoutesList extends React.Component {
render() {
return (
<Router>
<div>
<Switch>
<Route path="/" component={PageContainer} />
<Route path="style-guide" component={PageContainer} />
<Route
render={() => {
return <Redirect to="/" />
}}
/>
</Switch>
</div>
</Router>
)
}
}
export default RoutesList
Make your routes exact paths
<Route exact path="/" component={PageContainer} />
<Route exact path="/style-guide" component={PageContainer} />