(react-scroll) Not working when ScrollLink & ScrollElement are different component - javascript

I have route.js component, in which I Import navbar.js component & homePage.js component. When I click on navbar menu , I want to go to specific section of homePage.js component.
Example, when I click on AboutMe menu then AboutMe section of homePage come. I try to follow
How to scroll to a specific targeted component when clicking on Navbar Link
this stack overflow link but it's not work, according to this answer when I wrap my link to ScrollLink, menu will not display.
Please help me I am new in reactjs.
render() {
if (this.state.redirect) {
return (
<Router>
<DIV className="template-nav">
<NavBar
menu={this.menu}
onClick={()=>this.changeRedirect()}
></NavBar>
</DIV>
<Redirect from="*" to="/" />
<Route
exact
path="/"
component={HomePage}
navBar_menu={this.navBar_menu}
/>
</Router>
);
}
return (
<Router>
<DIV className="template-nav">
<NavBar menu={this.menu}></NavBar>
</DIV>
</Router>
);
}

Related

ReactJS react-router-dom - Components not showing

I am new here but a long time reader of StackOverflow content!
I am new to React and have a simple question about Multi-Pages App.
I did start to work on a website for a friend, I started with a one-pager but finally I did realize that I will need more then only one page. I installed react-router-dom and tried to set it up, the website doesn't return any errors, but only the SideBarMenu component is showing up !
the content of Home is not showing on / , same for the rest on /audio, /video, /images... And the weirdest part of it, if I write as URL for example some random thing like /asiomaos9j, it still show a blank website with the SideBarMenu without even crashing...
Anyone know why all my component on Home are not showing? Or even on /images the js file only contains a div with a H1 inside and this H1 not showing either... I can't figure out what I am doing wrong with this !
I did import as follow:
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
Then here is my App.js :
export default function App() {
return (
<React.StrictMode>
<Routes />
</React.StrictMode>
);
}
My Routes.js :
export default function Routes() {
return (
<Router>
<Switch>
<Route exact path='/' component={Home}></Route>
<Route exact path="/audio" component={AudioPlayerApp}></Route>
<Route exact path="/video" component={VideoPlayerApp}></Route>
<Route exact path="/images" component={ImagesApp}></Route>
</Switch>
<SideBarMenu pageWrapId={"page-wrap"} outerContainerId={"app"} />
</Router>
);
}
Finally as example, here is my Home.js
function Home(){
return(
<React.Fragment>
<Header />
<Services />
<ServicesContent />
<Media />
<MediaContent />
<Studio />
<StudioContent />
<Partenaires />
<PartenairesContent />
<Contact />
<ContactContent />
<Footer />
</React.Fragment>
)
}
export default Home;
Here as asked, SideBarMenu.js :
import React from 'react';
import { slide as Menu } from 'react-burger-menu';
import './components_css/SideBarMenu.css';
export default props =>{
return(
<Menu {...props}>
<a className="menu-item" href="#">
<span>+</span>Accueil
</a>
<a className="menu-item" href="#services_link">
<span>+</span>Services
</a>
<a className="menu-item" href="#media_link">
<span>+</span>Médias
</a>
<a className="menu-item" href="#studio_link">
<span>+</span>Studio
</a>
<a className="menu-item" href="#contact_link">
<span>+</span>Contact
</a>
</Menu>
);
};
These are links inside the Home page for the moment.
Take the exact out of the home route and place it at the end of all others

React Router - Why is the switch not changing html when the path changes?

I am working on a web app, and i am having some issues with reactJS Router. When i redirect to the /sell path the HTML form the / path stays, and the HTML inside the /sell route doesn't load.
Am i doing something wrong? would anyone be able to point me towards the right direction?
import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Helmet from "react-helmet";
import CreateList from "./CreateList";
//https://colorhunt.co/palette/33990
//https://colorhunt.co/palette/66990
class Home extends Component {
constructor(props) {
super(props);
this.state = { appTitle: "better craigslist"};
}
render() {
return (
<React.Fragment>
<Helmet>
<title>{this.state.appTitle}</title>
</Helmet>
<Router>
<Switch>
<Route path="/">
<div id="header-text">
<h1 className="center-align">
<b>Sellify</b>
</h1>
<h5 className="center-align">
Need to get rid of your stuff? create a listing and sell it here! <br /> Looking for something? Check if its on selify!
</h5>
</div>
<div className="col s12 center">
<Router>
<Link to="/sell">
<button className="btn" id="create-listing-button">
Create Listing
</button>
</Link>
</Router>
</div>
</Route>
<Route path="/sell">
<h1>Test</h1>
</Route>
</Switch>
</Router>
</React.Fragment>
);
}
}
export default Home;
Thank you very much!
Issue
You've more than one Router. The inner Router context is handling the links so the outer Router isn't notified.
Solution
Use only one Router component, remove the Router around the Link. Additionally, when using a Switch, path order and specificity matter. You want to oder your more specific paths before less specific paths. "/" is a path prefix for all paths and would be matched and rendered before "/sell".
class Home extends Component {
constructor(props) {
super(props);
this.state = { appTitle: "better craigslist" };
}
render() {
return (
<React.Fragment>
<Helmet>
<title>{this.state.appTitle}</title>
</Helmet>
<Router>
<Switch>
<Route path="/sell">
<h1>Test</h1>
</Route>
<Route path="/">
...
<div className="col s12 center">
<Link to="/sell">
<button className="btn" id="create-listing-button">
Create Listing
</button>
</Link>
</div>
</Route>
</Switch>
</Router>
</React.Fragment>
);
}
}

React-router v4 updates url but doesn't render component

I'm using react-router v4, no redux. The code example is below:
class MainPage extends Component {
render() {
return (
<div className="MainPage">
<BrowserRouter>
<Switch>
{/* <Route exact path='/' /> */}
<Route path='/signin' component={SignIn}/>
<Route path='/signup' component={SignUp} />
<Redirect from='*' to='/' />
</Switch>
</BrowserRouter>
</div>
);
}
}
When I'm using Link it updates URL in browser but doesn't render anything, nothing happens. When I resfresh, everything becomes fine and component renderes;
export default class Navbar extends Component {
render() {
return (
<div className="navbar">
<BrowserRouter>
<div>
<Link to='/signin'>Sign in</Link>
<Link to='/signup'>Sign up</Link>
</div>
</BrowserRouter>
</div>
);
}
}
I already tried everything, even withRouter(Component), but it says that with router may only be used inside
How can I deal with this?
Here is the working code. As others explained you should use one BrowserRouter. If you want to render your Navbar component all the time then you should place it above Switch but under BrowserRouter hence you need Link there.
const Navbar = () => (
<div className="navbar">
<Link to='/signin'>Sign in</Link>
<Link to='/signup'>Sign up</Link>
</div>
);
class MainPage extends React.Component {
render() {
return (
<div className="MainPage">
<BrowserRouter>
<div>
<Navbar />
<Switch>
{/* <Route exact path='/' /> */}
<Route path='/signin' component={SignIn} />
<Route path='/signup' component={SignUp} />
<Redirect from='*' to='/' />
</Switch>
</div>
</BrowserRouter>
</div>
);
}
}
You should only have a single BrowserRouter component in your tree. The BrowserRouter component holds the shared state the router used to synchronize the URL with the rendered routes. In your situation, you are getting two different versions of router state because you rendering two BrowserRouter components so you should probably render a single BrowserRouter component somewhere higher in your component tree.
If you have an App component that renders both Navbar and MainPage then you can move the router into that component:
export default class App extends Component {
render() {
return (
<BrowserRouter>
<div className="AppContainer">
<Navbar />
<MainPage />
</div>
</BrowserRouter>
);
}
}

React Router- Link not directing properly

I have the following component...
import React from 'react';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'
class Bottom extends React.Component {
constructor(){
super();
this.state = {link:"Don't have an account?"}
}
render(){
return (
<div>
<div className="sub-login">
<p>{this.state.link}<Link to="/register"> Register here</Link></p>
</div>
</div>
);
}
}
export default Bottom;
As you can see I have a <Link> pointing to the page I want the user to go to if it is clicked.
This component is then bundled into another class called <Register />.
And then I have the following Routes...
class App extends React.Component {
render(){
return (
<Router history={hashHistory}>
<Route path='/' component={Index} >
<IndexRoute component={Register} />
<Route path='/register' component={Register} />
</Route>
</Router>
);
}
}
When the Link is clicked, the url changes to /register, but the content of the page is still that of the home page, which is <Index /> component.
Why won't it show the <Register /> component? What must I change to render the register component when the link is clicked?
I realized that all I had to do was add {this.props.children} to my Index Layout. So when the Link is clicked, the Register Layout will be loaded into my Index Layout.
The following code made it work...
render(){
return (
<div>
{this.props.children} <-----
<div className="sub-login">
<p>{this.state.link}<Link to="/register"> Register here</Link></p>
</div>
</div>
);

react-router: Cannot read property 'push' of undefined

i'm struggling with react router.
all i want is to build a side menu with a link to login that will show the Login comp in the right pane.
so this is the HTML:
<main id="buschat-app"></main>
<div id="menu"></div>
This is how i render the Buschat main comp and the Router comp.
class Buschat extends React.Component {
constructor() {
super()
}
render() {
return (
<div className="container-fluid">
<div className="row">
<div className="col-sm-2">
<Menu />
</div>
<div className="col-sm-10">
<Main />
</div>
</div>
</div>
)
}
}
ReactDOM.render(<Buschat />, document.getElementById('buschat-app'))
ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={Default}/>
<Route path="login" component={Login}/>
</Router>
), document.getElementById('menu'));
now, in i have the Menu comp that looks like that:
import React from 'react';
import { Link } from 'react-router'
export default class Menu extends React.Component {
render() {
return (
<div>
<nav className="navbar navbar-light bg-faded">
<Link to="/">Default</Link>
<Link to="/login">Login</Link>
</nav>
</div>
)
}
}
when the page is load i see the 2 links on the right.
when i click on the login link, i get this console error:
Uncaught TypeError: Cannot read property 'push' of undefined
what im doing wrong? how react-router knows to render login comp on the right pane?
sorry but im new to this...
You are missing context reference in React Component.
static contextTypes = {router: PropTypes.object.isRequired};
Ref: https://github.com/ReactTraining/react-router/issues/3024
Remove
ReactDOM.render(<Buschat />, document.getElementById('buschat-app'))
and change to
ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={Buschat}/>
<Route path="login" component={Login}/>
</Router>
), document.getElementById('buschat-app'));
in Buschat class, add the <Menu> component.
I hope this helps!

Categories

Resources