I have a React application where if I change the route to a page with a small height the entire body doesn't have a max height for the window (the html does have full height).
I have a standard index.html setup here
<html>
<body>
<div id="app"></div>
<script src="client.min.js"></script>
</body>
</html>
Then here's my App.js file:
import React from "react"
import ReactDOM from "react-dom"
import {Router, hashHistory} from "react-router"
import routes from "./Routes"
const app = document.getElementById('app')
ReactDOM.render((
<Router history={hashHistory} routes={routes()}>
</Router>
), app)
And here's my Routes.js file:
import React from "react"
import {Route, IndexRoute} from "react-router"
import Layout from "./Layout"
import About from "./pages/About"
import Home from "./pages/Home"
import NotFound from "./pages/NotFound"
import Register from "./pages/Register"
import SignIn from "./pages/SignIn"
import Terms from "./pages/Terms"
export default() => {
return (
<Route name="root" path="/" component={Layout}>
<IndexRoute component={Home}/>
<Route path="/about" component={About}/>
<Route path="/signin" component={SignIn}/>
<Route path="/register" component={Register}/>
<Route path="/terms" component={Terms}/>
<Route path="*" component={NotFound}/>
</Route>
)
}
Finally here's my Layout.js:
import React from "react"
import ReactDOM from "react"
import DevTool from 'mobx-react-devtools'
import Control from "./components/layout/Control"
import Footer from "./components/layout/Footer"
import Header from "./components/layout/Header"
import Sidebar from "./components/layout/Sidebar"
export default class Layout extends React.Component {
render() {
const { location } = this.props
return (
<div className="wrapper">
<DevTool /> {/* Remove for PRODUCTION */}
<Header />
<Sidebar />
{this.props.children}
<Footer />
<Control />
<div className="control-sidebar-bg"></div>
</div>
)
}
}
All my routes go to pages with very little content so it doesn't cover the full page. In every case the entire body height wraps to the height of the content while the html remains 100% of with window.
I've tried debugging on everything. There's no padding or margin on the body or html rendered by inspecting the elements. I've also tried adding height and min-height 100% attributes to the body tags with inline styling and still didn't get any decent results.
The page automatically fixes itself as soon as the window resizes or I reload the page but that eliminates a lot of the reason to why I am using React.
Any ideas on what could fix this?
I managed to get a fix, this is quite a specific problem (which I've gather from the lack of response). But in-case anyone else stumbled across a problem like this.
All of my pages components had the following render:
export default class About extends React.Component {
render() {
return (
<div className="content-wrapper">
{/* All my about code goes in here */}
</div>
)
}
}
I ended up removing the content-wrapper classNames from all the page container dividers and did the following to the Layout page:
export default class Layout extends React.Component {
render() {
const { location } = this.props
return (
<div className="wrapper">
<DevTool /> {/* Remove for PRODUCTION */}
<Header />
<Sidebar />
<div className="content-wrapper">
{this.props.children}
</div>
<Footer />
<Control />
<div className="control-sidebar-bg"></div>
</div>
)
}
}
This solved all my problems :)
Related
While clicking on the links updates the slug, I have to manually refresh the page in order to get the page content to update.
app.js:
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import NavigationContainer from './titlebar';
import AllLinks from './all-links';
import Home from './home';
export default class App extends Component {
render() {
return (
<div className='app'>
<NavigationContainer />
<Router>
<Switch>
<Route path="/all-links" component={AllLinks} />
<Route exact path="/" component={Home} />
</Switch>
</Router>
</div>
);
}
}
titlebar.js:
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
export default class NavigationContainer extends Component {
render() {
return (
<div className="navigation-container">
<div className="text-wrapper">
<div className="nav-left">
<NavLink exact to="/">
Redis Link Shortener
</NavLink>
</div>
<div className="nav-right">
<NavLink to="/all-links" >
All Links
</NavLink>
</div>
</div>
</div>
)
}
}
I've tried going through documentation, going through similar questions, and going through code I've written in the past that does work in this regard. As far as I can tell, what I'm using is identical to code I've written in the past that has worked. I'm completely stuck for why it isn't automatically rendering.
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 have searched through different tutorials and multiple stackOverflow questions. And none of which, helped me solve a very basic problem:
Implement nested routes with react-router-dom
Here's my code so far:
App.js
<Route exact path="/home" name="Home" component={DefaultLayout} />
DefaultLayout.js
<Route path="/home/users" component={Users} />
When I go to /home/users, I get a blank screen because react-router-dom is looking-up the definition of that route inside App.js instead of searching it inside DefaultLayout.js..
So I have two questions:
QUESION 1: What am I doing wrong exactly?
QUESTION 2: How does react-router-dom know that it should look for the nested route inside DefaultLayout.js instead of inside App.js?
It has been two days and I still cannot solve this simple problem.
Any help is very much appreciated.
EDIT 1: I have started a new project just for the sake of implementing a very simple nested routing:
App.js
import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import ParentComponent from "./nestedComponents/ParentComponent";
function App() {
return (
<div>
<BrowserRouter>
<Switch>
<Route exact path="/home" name="Home" component={ParentComponent} />
</Switch>
</BrowserRouter>
</div>
);
}
export default App;
ParentComponent.js
import React from "react";
import nestedComponentOne from "./nestedComponentOne";
import nestedComponentTwo from "./nestedComponentTwo";
import { Switch, Route } from "react-router-dom";
export default function ParentComponent() {
return (
<div>
PARENT COMPONENT
<Switch>
<Route path="home/nestedComponentOne" component={nestedComponentOne} />
<Route path="home/nestedComponentTwo" component={nestedComponentTwo} />
</Switch>
</div>
);
}
nestedComponentOne.js
import React from "react";
export default function nestedComponentOne() {
return <div>NESTED COMPONENT 1</div>;
}
nestedComponentTwo.js
import React from "react";
export default function nestedComponentTwo() {
return <div>NESTED COMPONENT 2</div>;
}
But, I still get a blank screen whenever I try to access a nested component...
You have this problem:
React-router urls don't work when refreshing or writing manually
The simplest fix is to replace the BrowserRouter with a HashRouter
I read so much today and yesterday and I am totally stuck in my development. In order to learn React.Js, I am making a simple website that displays pictures and description by categories. The problem I am facing is the link between my NavItems (of the navbar) and the redirections.
I have this router in my index.js:
render((
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRedirect to="/index" />
<Route path="/index" component={Home}/>
<Route path="/dogs" component={Dogs}/>
<Route path="/cats" component={Cats}/>
</Route>
</Router>
), document.getElementById('app'))
Navbar.js:
import React from 'react'
import {
Navbar as BoostrapNavBar,
Nav,
NavItem,
MenuItem,
NavDropdown,
Jumbotron,
Button } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
export default class Navbar extends React.Component {
render () {
return (
<BoostrapNavBar inverse collapseOnSelect>
<BoostrapNavBar.Header>
<BoostrapNavBar.Brand>
{this.props.navbar_title}
</BoostrapNavBar.Brand>
<BoostrapNavBar.Toggle />
</BoostrapNavBar.Header>
<BoostrapNavBar.Collapse>
<Nav pullRight>
<NavItem href="/dogs">Dogs</NavItem>
<NavItem href="/cats">Cats</NavItem>
</Nav>
</BoostrapNavBar.Collapse>
</BoostrapNavBar>
);
}
}
So my site render but, if I click one of my navitems, then a message will appear: Cannot GET /dogs.
So, I began to search on the internet about how does navbar works with react-router and... I got so many answers, but I can't make it work, I don't get why. I tried LinkContainer but something is wrong with history, so I check my Router in index.js without any success.
I read some articles about <Switch>, <Browser>, etc, but same, no success :( any idea?
Thanks for any help
Could you do something like this?
import { Link } from 'react-router-dom';
import { NavBar, Nav, NavItem} from 'react-bootstrap';
...
<Nav>
<NavItem componentClass={Link} href="/dogs" to="/dogs" active={location.pathname === '/dogs'}>Dogs</NavItem>
<NavItem componentClass={Link} href="/cats" to="/cats" active={location.pathname === '/cats'}>Cats</NavItem>
</Nav>
Gotten from here
With react-router v4 alpha7 and dom alpha6 (latest versions) i get the following error:
Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.
in Link (created by MainComponent)
in p (created by MainComponent)
in div (created by MainComponent)
in MainComponent (created by Route)
in Route
in div
in Router (created by BrowserRouter)
in BrowserRouter
in ApolloProvider
I have seen similar questions like this, but i followed their advice.
BrowserRouter is a top level component around router components
import React from 'react'
import ReactDOM from 'react-dom'
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import MainComponent from './components/main.jsx';
import AboutComponent from './components/about.jsx';
import { BrowserRouter, Route, Link } from 'react-router-dom'
const client = new ApolloClient({
networkInterface: createNetworkInterface({ uri: 'http://app.local:8001/graphql' }),
});
ReactDOM.render(
<ApolloProvider client={client}>
<BrowserRouter>
<div>
<Route exactly path="/" component={MainComponent} />
<Route path="/about" component={AboutComponent} />
</div>
</BrowserRouter>
</ApolloProvider>,
document.getElementById('tourapp')
)
Then there is the main.jsx:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class MainComponent extends Component {
render() {
return <div>
<h1>Hello World</h1>
<p><Link to="/about">About</Link></p>
</div>;
}
}
export default MainComponent
Does anyone have an idea why the router context is not passed? This is almost straightfoward from the docs.
Do this, the link has to be inside the Router tag
<div>
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<a className="navbar-brand" href="#">WebSiteName</a>
</div>
<ul className="nav navbar-nav">
<li className="active"><Link to="/">Home</Link></li>
<li><Link to='/about'>About</Link></li>
</ul>
</div>
</nav>
<Switch>
<Route exact path="/" component={Weather}/>
<Route path="/about" component={About}/>
</Switch>
</div>
</Router>