I would like, when clicking on a NavLink, to update the router page instead of just changing it, my pages contain external JS plugins that are not loaded just by changing the page, it is necessary to reload.
My code:
import React from "react";
import Home from './components/pages/Home';
import Header from './components/Header';
import Sidebar from './components/Sidebar';
import Teste from './components/pages/Teste';
import Footer from './components/Footer';
import { Fragment } from "react";
import './App.css';
import {
BrowserRouter as Router,
Switch,
Route,
NavLink
} from "react-router-dom";
export default function App() {
return (
<div>
<Fragment>
<div className="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
<Header />
<div className="app-main">
<Router>
<Sidebar />
<div className="app-main__outer">
<Switch>
<Route path="/home">
<Home />
</Route>
<Route path="/page/teste">
<Teste />
</Route>
</Switch>
<Footer />
</div>
</Router>
</div>
</div>
</Fragment>
</div>
);
}
The NavLinks is in the SideBar component, so it is not seen there, my "Home" page contains a JS plugin that when coming from the "Test" page, it is not loaded, only when I refresh the entire page. Thanks.
You can force page reloads with the forceRefresh prop on the BrowserRouter.
forceRefresh
If true the router will use full page refreshes on page navigation.
You may want to use this to imitate the way a traditional
server-rendered app would work with full page refreshes between page
navigation.
<Router forceRefresh>
<Sidebar />
<div className="app-main__outer">
<Switch>
<Route path="/home">
<Home />
</Route>
<Route path="/page/teste">
<Teste />
</Route>
</Switch>
<Footer />
</div>
</Router>
If/when you ever upgrade to react-router-dom#6 this is accomplished similarly via the Link|NavLink component's reloadDocument prop.
RRDv6 Link
interface LinkProps
extends Omit<
React.AnchorHTMLAttributes<HTMLAnchorElement>,
"href"
> {
replace?: boolean;
state?: any;
to: To;
reloadDocument?: boolean; // <--
}
You can refresh the BrowserRouter by using forceRefresh property of BrowserRouter:
<Router forceRefresh>
<Sidebar />
<div className="app-main__outer">
<Switch>
<Route path="/home">
<Home />
</Route>
<Route path="/page/teste">
<Teste />
</Route>
</Switch>
<Footer />
</div>
</Router>
Related
Why is it only showing a white screen when i try to add a new page on both pages
import './App.css';
import Header from './Header';
import Home from './Home';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
// BEM
<Router>
<div className="App">
<Routes>
<Route path="/check">
<Header />
</Route>
<Route path="/">
<Header />
<Home />
</Route>
</Routes>
</div>
</Router>
);
}
export default App;
Why is it only showing a white screen when i try to add a new page on both pages
My App.js
import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Home from "./Components/screens/Home";
import Signup from "./Components/screens/Signup";
import Signin from "./Components/screens/Login";
import Profile from "./Components/screens/Profile";
import CreatePost from "./Components/screens/createPost";
import Navbar from "./Components/Navbar";
function App() {
return (
<BrowserRouter>
<Navbar />
<Route path="/">
<Home />
</Route>
<Route path="/Signin">
<Signin />
</Route>
<Route path="/Signup">
<Signup />
</Route>
<Route path="/Profile">
<Profile />
</Route>
<Route path="/create">
<CreatePost />
</Route>
</BrowserRouter>
);
}
export default App;
my navbar is containing links of all pages and is using react-router-dom but my home page is always rendering above every page , it is containing 4 other page links including home, i have just shown home and signup as error is same with other pages as well
My Navbar.js
import React from "react";
import PeopleIcon from "#material-ui/icons/People";
import IconButton from "#material-ui/core/IconButton";
import { Link } from "react-router-dom";
import "../ComponentsCss/Navbar.css";
function Navbar() {
return (
<div>
<nav>
<div className="nav-wrapper white">
<Link to="/" className="brand-logo">
Instagram
</Link>
<ul id="nav-mobile" className="right hide-on-med-and-down">
<li>
<Link to="/Signin">Signin</Link>
</li>
<li>
<Link to="/Signup">Signup</Link>
</li>
<li>
<Link to="/Profile">Profile</Link>
</li>
<li>
<Link to="/create">create</Link>
</li>
</ul>
</div>
</nav>
</div>
);
}
export default Navbar;
Home.js
import React from "react";
import "../../ComponentsCss/Home.css";
function Home() {
return (
<div className="home">
<div className="card home-card">
<h5>Ramesh</h5>
<div className="card-image">
<img src="https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
</div>
<div className="card-content">
<i className="material-icons" style={{ color: "red" }}>
favorite
</i>
<h6>TItle</h6>
<p>this is amazing post</p>
<input type="text" placeholder="add a comment" />
</div>
</div>
</div>
);
}
export default Home;
Signup.js
import React from "react";
import { Link } from "react-router-dom";
import "../../ComponentsCss/Login.css";
function Signup() {
return (
<div className="my-card">
<div className="card auth-card input-field">
<h2>Instagram</h2>
<input type="text" placeholder="name" />
<input type="email" placeholder="email" />
<input type="password" placeholder="password" />
<button
className="btn waves-effect waves-light "
type="submit"
name="action"
>
Signup
</button>
<h5>
<Link to="/signin">Already have account?</Link>
</h5>
</div>
</div>
);
}
export default Signup;
complete github code -: https://github.com/dhruv354/instagram-frontend.git
You need to make your Home route only match when is that exact route, change your App with this:
import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Home from "./Components/screens/Home";
import Signup from "./Components/screens/Signup";
import Signin from "./Components/screens/Login";
import Profile from "./Components/screens/Profile";
import CreatePost from "./Components/screens/createPost";
import Navbar from "./Components/Navbar";
function App() {
return (
<BrowserRouter>
<Navbar />
<Route exact path="/">
<Home />
</Route>
<Route path="/Signin">
<Signin />
</Route>
<Route path="/Signup">
<Signup />
</Route>
<Route path="/Profile">
<Profile />
</Route>
<Route path="/create">
<CreatePost />
</Route>
</BrowserRouter>
);
}
export default App;
Issue
By default, Routers inclusively match routes. In other words, all routes with a matching path will be matched and rendered. Think of the path prop as a path prefix, path="/" is a prefix for every path, so it will always be matched and rendered.
Solution
Use the Switch component to exclusively render only a single matching Route component, and order the routes so the more specific paths ("/profile") can be matched before less specific paths ("/"). Your home path "/" will typically be the last route since it is the least specific.
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
function App() {
return (
<Router>
<Navbar />
<Switch>
<Route path="/Signin">
<Signin />
</Route>
<Route path="/Signup">
<Signup />
</Route>
<Route path="/Profile">
<Profile />
</Route>
<Route path="/create">
<CreatePost />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
);
}
Path order and specificity matter
In the Switch, path order and specificity matter.
If for a url "/foo/bar" and example paths:
"/foo"
"/foo/:id"
"/foo/bar"
"/foo" is a prefix for the other routes and less specific, but because of the order it will be matched and rendered since the url will match. If "/foo" wasn't there, then similarly "/foo/:id" would match and render when instead you really wanted that last "/foo/bar" path to be matched.
Update the order:
"/foo/bar"
"/foo/:id"
"/foo"
"bar" is more specific than placeholder ":id", and both are more specific than "/foo".
import React from "react";
import Navbar from "./components/Navbar/navbar.component";
import HomePage from "./pages/homePage/HomePage.component";
import Footer from "./components/Footer/footer.component";
import BlogPage from "./pages/blogPage/BlogPage.component";
import { Route, Switch, BrowserRouter } from "react-router-dom";
function App() {
return (
<div className="App">
<BrowserRouter>
<Navbar />
<Switch>
<Route exact path="./BlogPage" component={BlogPage} />
<Route exact path="./" component={HomePage} />
</Switch>
<Footer />
</BrowserRouter>
</div>
);
}
export default App;
When I run the app the home component loads without any trouble, but it only loads Navbar and Footer Components, Clearly I am doing something wrong but I haven't been able to figure out what.
the path you are using in Route is the path what you see in the browser url. You dont need dot before the path So,
Replace
<Route exact path="./BlogPage" component={BlogPage} />
<Route exact path="./" component={HomePage} />
by this
<Route exact path="/BlogPage" component={BlogPage} />
<Route exact path="/" component={HomePage} />
I'm trying to properly render my different components with the HTML/CSS sidebar with React Routes and Apollo.
I have a sidebar that correctly renders to the left of the screen and a little navbar on top of it, the space for the component is not being blocked by any css property.
The expected output is:
The actual output:
I've tried to place all the Routes inside the sidebar but every time I click on them, they don't load at all, the URL changes but the content doesn't and I need to reload the webpage for it take some effect. The help would be very much appreciated.
App.js
import React from 'react';
import ApolloClient from 'apollo-boost';
import {ApolloProvider} from '#apollo/react-hooks';
import { render } from 'react-dom';
import {BrowserRouter as Router, Route, Link,Switch} from 'react-router-dom';
import 'bootswatch/dist/flatly/bootstrap.min.css';
import Nav from './components/Nav'
import Home from './components/pages/Home'
import About from './components/pages/About'
import Articles from './components/article/Articles'
import Article from './components/article/Article'
const client = new ApolloClient({
uri: 'url in here'
});
const App = () => {
return (
<ApolloProvider client={client}>
<Router>
<div className="App">
<Nav/>
<Route exact path='/' component={Home} />
<Route exact path='/Articles' component={Articles} />
<Route exact path='/Articles/:id' component={Article} />
<Route exact path='/About' component={About} />
</div>
</Router>
</ApolloProvider>
);
}
render(<App />, document.getElementById('root'));
export default App;
Nav.js component
import React from 'react';
import {BrowserRouter as Link} from 'react-router-dom';
export default function Nav() {
return (
<div className="wrapper">
<nav id="sidebar">
<Link className="nav-link" to="/">
<h3>Home</h3>
</Link>
.
.
.
</nav>
<div id="content">
<nav className="navBar" >
</nav>
<div className ="ComponentRender">
Here's where the component should be rendered
</div>
</div>
</div>
)
}
I don't know about Apollo but I think you should move your routes from the App component to the Nav component, so the code would be:
App component:
const App = () => {
return (
<ApolloProvider client={client}>
<Router>
<div className="App">
<Nav/>
</div>
</Router>
</ApolloProvider>
);
}
And the Nav component:
export default function Nav() {
return (
<div className="wrapper">
<nav id="sidebar">
<Link className="nav-link" to="/">
<h3>Home</h3>
</Link>
.
.
.
</nav>
<div id="content">
<nav className="navBar" >
</nav>
<div className ="ComponentRender">
<Route exact path='/' component={Home} />
<Route exact path='/Articles' component={Articles} />
<Route exact path='/Articles/:id' component={Article} />
<Route exact path='/About' component={About} />
</div>
</div>
</div>
)
}
Don't forget to move imports from App to Nav as well.
I'm trying to make a login page that would work as entry page for my app, and after user would input login and password, it would open main component with menu and content of the pages.
the problem that I can'r understand how to setup a router, or main app structure so it would work as I want. So far I can display a login component with main menu bar at the same time, or just a login page without working pages.
there is my router
import React from 'react'
import ReactDOM from 'react-dom'
import {Router, Route, IndexRoute, hashHistory} from 'react-router'
import App from './App'
import LoginPage from './pages/login'
import Forms from './pages/Forms'
import Home from './pages/Home'
ReactDOM.render(
<Router history={hashHistory}>
<Route path ="/" component={App}>
<IndexRoute component={LoginPage} />
<Route exact path='/LoginPage' component={LoginPage} />
<Route exact path='/App' component={App} />
<Route exact path='/Home' component={Home} />
<Route exact path='/Forms' component={Forms} />
</Route>
</Router>, document.getElementById('root'))
my login page
import React, { Component } from 'react'
import { Link } from "react-router"
import logo from './logo.jpg';
export default class LoginPage extends Component {
render() {
return (
<div className="login-page">
<div className="login-form-cont">
<div style={{paddingBottom:'10px'}}> <img src={logo} width="270" height="54" /> </div>
<form className="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<Link to={`/Home`}>
<button> login </button>
</Link>
</form>
</div>
</div>
)
}
}
and my app.js
import React, { Component } from 'react'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import classnames from 'classnames'
import SideBarMenu from './components/SidebarMenu'
export default class App extends Component {
constructor(props){
super(props)
this.state = {open: false}
}
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<div >
<SideBarMenu/>
<div className={classnames('app-content')}>
{ this.props.children }
</div>
</div>
</MuiThemeProvider>
)
}
}
I tried to make router to start from login component but in this case even address is changing in a browser window, there was no changes on the screen itself
I'm using react router 3.2 and react 15.6
first of all i will recommend you use react-router v4 cos that what i will be showing you. and v4 is beta than the older versions.
import { BrowserRouter, Switch, Route } from 'react-router-dom';
export default class App extends Component{
render(){
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={Login}/>
<Route exact path="/Home" component={Home}/>
<Route exact path="/Dashboard" component={Dashboard} />
<Route exact path="/Dashboard/:userId" component={Dashboard}/>
<Route component={NotFound}/>
</Switch>
</BrowserRouter>
)
}
}