I'm trying to display a page within the Home page, so to speak, by clicking a link in a navigation bar that then displays a "square" of information without leaving the Home page. This is my Home:
import React, { Component } from 'react';
import { Link } from 'react-router';
export default class Home extends Component {
var Music = React.createClass({
render: function() {
return (
<div>
<h2> BBB </h2>
</div>
);
}
});
render() {
return (
<div className='Home' id='Home'>
<div id='musicMenu'>
<ul>
<li id="music"><Link to="/music">Music</Link></li>
<li id="shows"><Link to="/shows">Shows</Link></li>
<li id="collections"><Link to="/collections">Collections</Link></li>
</ul>
</div>
</div>
);
}
}
This is my app.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';
import App from 'views/App';
import Home from 'views/Home';
import About from 'views/About';
import Cart from 'views/webcart';
import Music from 'views/music';
import Shows from 'views/shows';
import Collections from 'views/collections';
ReactDOM.render(
<Router history={ hashHistory }>
<Route path='/' component={ App }>
<IndexRoute component={ Home } />
<Route path='about' component={ About } />
<Route path='Cart' component={ Cart } />
<Route path='music' component={ Music } />
<Route path='shows' component={ Shows } />
<Route path='collections' component={ Collections } />
</Route>
</Router>,
document.getElementById('app') // eslint-disable-line
);
The error I'm getting in Webpack is
ERROR in ./js/views/Home.js
Module build failed: SyntaxError: Unexpected token, expected
and points to var Music. How can I fix this error? Also, is this the best way to do this or can anyone recommend a better way?
You can't have a var within the Home class. That's not allowed in JS. Move it outside just below the imports.
Also the square you want to display is this component?
<div>
<h2> BBB </h2>
</div>
Add a CSS class called .invisible like this
.invisible{
display:none;
}
And then in the home state do something like
this.state = {
showSquare:false
}
And in the render
<div className='Home' id='Home'>
<div className={this.state.showSquare?'':'invisible'}>
<h2> BBB </h2>
</div>
<div id='musicMenu'>
<ul>
<li id="music"><Link to="/music">Music</Link></li>
<li id="shows"><Link to="/shows">Shows</Link></li>
<li id="collections"><Link to="/collections">Collections</Link></li>
</ul>
</div>
</div>
What this does is make the square invisible when this.state.showSquare is false. Then in the navigation bar add a click handler which changes the state.showSquare
<li onClick={this.toggleShowSquare}>Show Square</li>
where toggleShowSquare() is
toggleShowSquare(){
this.setState((prevState)=>({showSquare:!prevState.showSquare}))
}
Remember to do a
this.toggleShowSquare = this.toggleShowSquare.bind(this) in the constructor
EDIT: Replying to comment.
For multiple divs do this
this.state = {
showSquareOne:false,
showSquareTwo:false
}
Then have the divs like this
<div className={this.state.showSquareOne?'':'invisible'}></div>
<div className={this.state.showSquareTwo?'':'invisible'}></div>
The li elements like this
<li onClick={()=>this.toggleShowSquare('showSquareOne')}>Show Square One</li>
<li onClick={()=>this.toggleShowSquare('showSquareTwo')}>Show Square Two</li>
And the function like this
toggleShowSquare(property){
this.setState((prevState)=>({[property]:!prevState[property]}))
}
Related
so i had a navbar component that has a <Link></Link> inside of it the problem in i couldn't use that link for the router (it wont refresh) when i clicked on it although the link appears on the URL but it didn't refresh
here's the code
import React, { Component } from 'react'
import {BrowserRouter as Router} from 'react-router-dom'
import Route from 'react-router-dom/Route'
import Nav from './Nav'
export class App extends Component {
render() {
return (
<div className="App">
<Router>
{/* NAVBAR */}
<Nav />
<Route path="/" exact render={
() => <h1>home</h1>
}/>
<Route path="/about" exact render={
() => <h1>about</h1>
}/>
<Route path="/author" exact render={
() => <h1>author</h1>
}/>
</Router>
</div>
)
}
}
export default App
and here's the navbar code
import React, { Component } from 'react'
import styles from './Nav.module.css'
import {BrowserRouter as Router} from 'react-router-dom'
import {Link} from 'react-router-dom'
export class Nav extends Component {
render() {
return (
<Router>
<div className={styles.nav}>
<div className="container">
<div className={styles.navgrid}>
<img className={styles.image} src="/img/actualLogo#1x.svg" alt="?"/>
<ul className={styles.ultest}>
<li><Link to="/">Home</Link></li>
<li><Link to="/updates">Updates</Link></li>
<li><Link to="/author">Author</Link></li>
</ul>
</div>
</div>
</div>
</Router>
)
}
}
export default Nav
I'm assuming it's because it's not on the same <Router></Router> but does anyone have a way to make this work?
You're creating a new <Router>, which has no defined <Route> elements within it. Remove that router:
export class Nav extends Component {
render() {
return (
<div className={styles.nav}>
<div className="container">
<div className={styles.navgrid}>
<img className={styles.image} src="/img/actualLogo#1x.svg" alt="?"/>
<ul className={styles.ultest}>
<li><Link to="/">Home</Link></li>
<li><Link to="/updates">Updates</Link></li>
<li><Link to="/author">Author</Link></li>
</ul>
</div>
</div>
</div>
)
}
}
Each component doesn't need its own <Router>, as long as they're all contained within (descendants of) the one defined in <App>.
I am just practicing how react-router works.
This is my App.js in which see message route
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import styled, { css } from 'styled-components';
import About from './components/About';
import Home from './components/Home';
import Messages from './components/Messages';
const Ul = styled.ul`
list-style-type: none;
padding: 0;
margin: 0;
background-color: #282c34;
`;
function App() {
return (
<div className='App'>
<header className='App-header'>
<img src={logo} className='App-logo' alt='logo' />
<div>welcome to React</div>
</header>
<Ul>
<Li>
<NewLink to='/'>Home</NewLink>
</Li>
<Li>
<NewLink to='/messages'>Messages</NewLink>
</Li>
<Li>
<NewLink to='/about'>About</NewLink>
</Li>
</Ul>
<Container>
<Route exact path='/' component={Home} />
<Route exact path='/messages' component={Messages} />
<Route exact path='/about' component={About} />
</Container>
</div>
);
}
export default App;
when route switched to messages route messages get rendered
**This is messages Route **
import React from 'react';
import { Route } from 'react-router-dom';
import { Li, NewLink } from '../App';
import Message from './Message';
const Messages = ({ match }) => (
<div>
<ul>
{[...Array(5).keys()].map((n) => (
<Li key={n}>
<NewLink primary to={`${match.url}/${n + 1}`}>
Message {n + 1}
</NewLink>
</Li>
))}
</ul>
<Route path={`${match.url}/:id`} component={Message} />
</div>
);
export default Messages;
**This is message route but it is not rendering below Messages Route **
**can anyone please tell what is the problem **
import React from 'react';
const Message = ({ match }) => <h3>Message with ID {match.params.id}</h3>;
export default Message;
The issue here is the presence of exact prop on route /messages
Now when you have the exact prop on Route, unless the path matches exactly the Route is not rendered and hence the child Routes will never be evaluated.
A better practise is to use Switch component which renders the first matching Route and re-order the Routes so that prefix paths are the end
<Switch>
<Route path='/messages' component={Messages} /> // no exact props
<Route path='/about' component={About} />
<Route path='/' component={Home} /> // home route rendered at the end
</Switch>
Also on a sidenote, in order to define paths on Routes, you must use match.path instead of match.url
I am trying to validate sessionStorage key and if valid then don't show register page and redirect to deashboard. But getting issue and it does not redirect or replce the path and show the register component again even user logged in.
Any help will be appriciated.
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link} from 'react-router-dom';
//import $ from 'jquery';
import Home from './home';
import About from './about';
import Contact from './contactus';
import Register from './register';
import Deshboard from './Deshboard/deshboard';
class MenuBar extends Component
{
requireAuth(nextState,replace)
{
var token = sessionStorage.getItem("authtoken_Session");
if(token != null)
{
replace({pathname: '/deshboard'});
}
else{
replace({pathname: '/register'});
}
}
render()
{
return (
<Router>
<div className="App-header">
<div className="row">
<div className="col-md-4"></div>
<div className="col-md-6"></div>
<div className="col-md-1">
<div className="myAccount"><Link to="/register">My Account</Link></div>
</div>
<div className="col-md-1"></div>
</div>
</div>
<div className="app-menu">
<ul className="clear-fix">
<li><Link to="/">Home</Link> </li>
<li><Link to="/about">About</Link> </li>
<li><Link to="/contact">Contact</Link> </li>
</ul>
<div className="clear"> </div>
</div>
<div className="body">
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/contact" component={Contact}/>
<Route path="/register" component={Register} onEnter={this.requireAuth}/>
<Route path="/deshboard" component={Deshboard} onEnter={this.requireAuth}/>
</div>
</Router>
);
};
}
export default MenuBar;
onEnter has been deprecated and will not work. You need render prop or you can create your custom PrivateRoute which will perform authentication related checks and then you can either redirect or render some other component.
Here is complete example from react-router-dom docs
https://reacttraining.com/react-router/web/example/auth-workflow
I have a sidebar and a TopNav that I render inside App component.
My hierarchy is like
Index > App > SideBar [> Lnks] = TopNav [> Links] = Content
I mean to say My App is rendered inside Index. Inside App, there are 3 Components named Topnav, SideNav, Content .
I want Topnav ,Sidenav to be available everytime but the linkes given in these navs should be rendered inside the Content. How am I supposed like this?
Below is my App.js
class App extends React.Component {
render() {
return (
<div>
<SideNav /> //SideNav should be rendered always
<TopNav /> //This one too
<div className={'content'}>
Render All the data from the links in Sidenav and Topnav here.
</div>
</div>
);
}
}
and my index.js looks like the code below
ReactDOM.render(
<App/>, document.getElementById('root'));
Here's the exact demo of what I want to do.
I just want to know the Routing configuration. What and where to put routing configurations
This app.js work
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import SideNav from './Components/SideNav';
import TopNav from './Components/TopNav';
import Home from './Components/Home';
import Stuff from './Components/Stuff';
import Noroute from './Components/Noroute';
function App() {
return (
<div className="App">
<SideNav/>
<TopNav/>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/stuff' component={Stuff} />
<Route component={Noroute} />
</Switch>
</div>
);
}
export default App;
and create folder Components and add your components
SideNav.js
import React from "react";
import { Link } from 'react-router-dom';
class SideNav extends React.Component {
render(){
return (
<div>
<ul className="navbar-nav mr-auto">
<li><Link to={'/'} className="nav-link"> Home </Link></li>
<li><Link to={'/stuff'} className="nav-link">Stuffs</Link></li>
</ul>
</div>
)
}
}
export default SideNav;
js and am using react-router-dom.
Say I have 2 files - 1. dashboard.js file
import React, { Component } from 'react';
import {Switch, Route, Link} from 'react-router-dom';
import WYSIWYG from './editor/wysiwyg';
export default class Dashboard extends Component{
render(){
return(
<div className="wrapper">
<Switch>
<Route exact path="/wysiwyg" component={WYSIWYG}/>
</Switch>
<ul id="DASHBOARD-MENU">
<li><Link to={{ pathname: '/wysiwyg'}}>WYSIWYG</Link></li>
</ul>
</div>
);
}
}
Note the ul with id="DASHBOARD-MENU" above
2nd - wysiwyg.js file
import React, { Component } from 'react';
export default class Wysiwyg extends Component{
render(){
return(
<div id="WYSIWYG-CONTAINER">
</div>
);
}
}
Note the div with id="WYSIWYG-CONTAINER" in the above snippet
My problem is:
After redirection to WYSIWYG container from my dashboard, I can still see the - <ul id="DASHBOARD-MENU" .. rendered below the <div id="WYSIWYG-CONTAINER ...
What I understood - is the component WYSIWYG is rendered replacing <Route declared in my dashboard.js file.
What I want:
I don't want the "DASHBOARD-MENU" element to render in my "WYSIWYG" page.
Is it possible?
The desired behavior can be obtained by considering both as different routes, and hence rendering only one of them depending on the path:
import React, { Component } from 'react';
import {Switch, Route, Link} from 'react-router-dom';
import WYSIWYG from './editor/wysiwyg';
const Dashboard = () => (
<ul id="DASHBOARD-MENU">
<li><Link to={{ pathname: '/wysiwyg'}}>WYSIWYG</Link></li>
</ul>
);
export default class Dashboard extends Component{
render(){
return(
<div className="wrapper">
<Switch>
<Route exact path="/" component={Dashboard} />
<Route exact path="/wysiwyg" component={WYSIWYG}/>
</Switch>
</div>
);
}
}