Develop Reference

How do I Link Components correctly using React Router?

I am using React and React Router to try and link my components together for a project. I would like to link off a picture from the Home page (current component) to a different component.
Currently I can click the picture and it kind of acts like a link (turns blue after I click it sometimes), although it doesn't link to the other component, no errors show and nothing changes in the url bar. Nothing literally happens.
Any thoughts? Here is my code:
import { HashRouter as Router, Route,} from 'react-router-dom';
import Header from './Header'
import PortfolioWorkPage from './Pages/PortfolioWorkPage';
class Home extends React.Component {
render () {
return (
<Router>
<Header />
<h1>PORTFOLIO</h1>
<div className="portfolioPic">
<img src='IMAGES/Portfolio-Pics-Logo.jpg' className='portfolioPic'></img>
<Route path='Portfolio' component={PortfolioWorkPage} />
</div>
</Router>
)
}
}
export default Home
Code with error: react-dom.development.js:17117 The above error occurred in the component: in img (created by Home) in div (created by Home) in Router (created by HashRouter) in HashRouter (created by Home) in Home (created by App) in Router (created by HashRouter) in HashRouter (created by App) in App
import { HashRouter as Router, Route, Link} from 'react-router-dom';
import Header from './Header'
import PortfolioWorkPage from './Pages/PortfolioWorkPage';
class Home extends React.Component {
render () {
return (
<Router>
<Header />
<h1>PORTFOLIO</h1>
<div className="portfolioPic">
<img src='IMAGES/Portfolio-Pics-Logo.jpg' className='portfolioPic'>
<Route exact path='Portfolio'><PortfolioWorkPage /></Route>
</img>
</div>
</Router>
)
}
}
export default Home

Following the comments, here are two implementations using internal state and then a route. In the first you stay at the url path mywebsite.com, in the second the url path becomes mywebsite.com/portfolio. In both cases the image will remain on the page - you are not actually being transferred to a new page, you are just selectively rendering componenets based on the path.
Using internal state:
class Home extends React.Component {
constructor(props){
super(props)
this.state = {
portfolioActive: false
}
}
handleClick = () => {
this.setState({portfolioActive: !this.state.portfolioActive})
}
render () {
return (
<>
<h1>PORTFOLIO</h1>
<div className="portfolioPic">
<img src='IMAGES/Portfolio-Pics-Logo.jpg' className='portfolioPic'
onClick={this.handleClick}/>
</div>
{this.state.portfolioActive ? <PortfolioWorkPage/> : null}
</>
)
}
}
export default Home
Using a route:
import { HashRouter as Router, Route, Link} from 'react-router-dom';
class Home extends React.Component {
render () {
return (
<Router>
<h1>PORTFOLIO</h1>
<div className="portfolioPic">
<Link to="/portfolio">
<img src='IMAGES/Portfolio-Pics-Logo.jpg' className='portfolioPic'/>
</Link>
</div>
<Route exact path="/portfolio">
<PortfolioWorkPage />
</Route>
</Router>
)
}
}
export default Home

You can use the Link or NavLink component provided by react router.
import { Link } from 'react-router-dom';
<Link to="/some-url"/>
<Router>
<div>
<Route exact path="/some-url">
<MyComponentWithImage />
</Route>
</div>
</Router>

ReactJS - Redirect in main component

I want to redirect to other page with search results after submitting form (search bar feature).
I will usually redirect with return <Redirect to={'/search/' + this.state.value} /> in render(), but I can't now since I need to render entire site (search bar is in main component).
I already tried this.props.history.push('/search/' + this.state.value) and this.context.router.history.push('/search/' + this.state.value) in place of comment but it doesn't work.
(Code simplified for clarity)
import React, { Component } from "react";
import {
Route,
NavLink,
BrowserRouter
} from "react-router-dom";
import Search from "./Search";
import Autosuggest from 'react-autosuggest';
class App extends Component {
constructor(props) {
super(props);
this.state = { value: '' };
this.search = this.search.bind(this);
}
// react-autosuggest code
search(e) {
e.preventDefault();
// Redirect to '/search/' + this.state.value
}
render() {
return (
<BrowserRouter>
<div className="app">
<div className="header">
<form className="search-form" onSubmit={this.search}>
{/* Autosuggest input which updates this.state.value */}
</form>
</div>
<div className="main">
<Route path="/search/:handle" component={Search} />
{/* Other Routes */}
</div>
</div>
</BrowserRouter>
);
}
}
export default App;
Both this.props.history and this.context.router.history are undefined if I try to use them. <Redirect /> (obviously) can't be rendered instead of <BrowserRouter />

Have you tried using withRouter HOC to App, giving you access to history as a prop?
class App extends Component {
// ...
search(e) {
e.preventDefault();
this.props.history.push(`/search/${this.state.value}`)
}
// ....
}
export default withRouter(App)

You need to import Redirect from react-router-dom,
import {Redirect} frpm 'react-router-dom'
And usage,
search(e) {
e.preventDefault();
if(this.state.value){
return <Redirect to={`/search/${this.state.value}`}
}
}

Using react api context alongside react router

I have a problem with passing context to route. I get an error when i click a link that goes to my component where context was passed from App component. Below is that component with App (only one import just to show where Context is coming from):
App.js
import { Context } from './Context';
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
cryptolist: []
}
}
componentDidMount = () => {
fetch('https://api.coinmarketcap.com/v2/ticker/?structure=array')
.then(response => response.json())
.then(json => this.setState({
cryptolist: json.data
}))
}
render() {
return (
<div>
<Menu />
<Context.Provider value={this.state}>
<Userlist />
</Context.Provider>
</div>
)
}
}
export default App;
Userlist.js ( should be cryptolist or something )
import { Context } from '.././Context'
export default class Userlist extends Component {
render() {
return (
<main>
<Context.Consumer>
{(context) => context.cryptolist.map(el => {
return (
<div>
<h2>{el.name}</h2>
<h5>{el.symbol}</h5>
<h3>{el.quotes.USD.price}</h3>
</div>
)
})}
</Context.Consumer>
</main>
)
}
}
Context.js
import React from 'react';
export const Context = React.createContext();
Everything works just fine here untill i wanted to make a menu that links to this component.
import React from "react";
import { slide as Slider } from 'react-burger-menu';
import { BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import Main from './main';
import Userlist from './userlist';
export default class Menu extends React.Component {
render () {
return (
<Router>
<div className="bg-navy w-100 h-100">
<Slider width={ 180 } isOpen={ false }>
<Link className="menu-item" to="/main">Home</Link>
<Link className="menu-item" to="/crypto">About</Link>
</Slider>
<Switch>
<Route path="/main" component={Main} />
<Route path="/crypto" component={Userlist} />
</Switch>
</div>
</Router>
);
}
}
When i click a link to component Userlist i get an error thats cryptolist is not defined. I get it that Userlist can't see a context after clicking link to it. How to pass it correctly?

You are using the routes in the Menu component. Is this really you want? Though, I don't know how this slide thingy works. Maybe this is the way you want to go. I think your problem occurs because your Menu component is not wrapped by the provider. Try like this:
<Context.Provider value={this.state}>
<Menu />
<Userlist />
</Context.Provider

Your Menu component will call Userlist but as it is out the Provider the context doesn’t exist!
Replace Userlist in Context.Provider by Menu and all will be fine.

React global objects & events

I'm new to React and still having some trouble "thinking in react" when it comes to global events & scope.
My goal is to maintain some global data about the "session" like whether a user is logged-in and their identity.
My main container looks like this:
import React, { Component } from "react";
import { Link, Route, Switch } from 'react-router-dom';
import Header from './Header';
import Routes from "./Routes";
class App extends Component {
render() {
return (
<div className="parent-container">
<Header />
<Content />
</div>
)
}
}
class Content extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="content" >
<Routes />
</div>
)
}
}
export default App;
<Header /> is simply a nav bar with a title & links.
<Routes /> is a react-router which looks like this:
import React from "react";
import { BrowserRouter, Route } from 'react-router-dom';
import HomeView from "../presentational/_Views/HomeView";
import LoginView from "../presentational/_Views/LoginView";
import CreateUserView from "../presentational/_Views/CreateUserView";
import TestView from "../presentational/_Views/TestView";
const Routes = () => (
<div>
<Route exact path="/" component={HomeView} />
<Route path="/login" component={LoginView} />
<Route path="/test" component={TestView} />
<Route path="/create" component={CreateUserView} />
</div>
)
export default Routes;
Each route loads a "presentational" view component that contains child components for that particular view (Login view component imports a LoginForm component etc).
Whenever my app is hard-loaded (or reloaded) I would like the following logic to be fired (pseudo-code):
if session_token exists:
- make a call to API
- verify session
- store a global session object containing session data
I figured I can do something like this in a componentWillMount() function on the App component...
//...
class App extends Component {
componentWillMount(){
if(token && valid(token)){
// store the user session in an object containing token, user-role, etc.
}
}
render() {
//....
..but this seems like a bad design.
The other part to this is to:
show/hide navbar links based on whether a user is logged in (show "login" link if not logged in, show "log out" link is logged in)
check authentication on state change before the view is rendered.
The above two is where I wanna go for context but focusing only on the main issue here just to wrap my head around it.
How is something like this done "the React way"?

passing parameters through react-router

I have a code which displays four images and when one image is clicked out of those, it takes up the whole screen.I am using react router to implement the same.
The code is like this
App.js
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import {FirstPage} from './FirstPage.js';
import {Panorama} from './Panorama.js';
import {BrowserRouter,Route,Router,Switch} from 'react-router-dom';
class App extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div>
<BrowserRouter>
<Switch>
<Route path="/" component={FirstPage} />
<Route path="/image/:id" component={Panorama} />
</Switch>
</BrowserRouter>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('container'));
FirstPage.js
import React from 'react';
import ReactDom from 'react-dom' ;
import $ from 'jquery' ;
import {Panorama} from './Panorama.js';
import {Redirect} from 'react-router-dom';
class FirstPage extends React.Component{
constructor(props){
super(props);
this.state={
list:[],
images:[],
isClicked:false,
redirect:true
}
this.loadImages=this.loadImages.bind(this);
this.loadOne=this.loadOne.bind(this);
}
componentDidMount(){
window.addEventListener('load',this.loadImages);
}
loadImages(){
console.log("load");
var that=this;
$.ajax({
type:'GET',
url:'https://demo0813639.mockable.io/getPanos',
datatype:'jsonp',
success:function(result){
var images=that.state.images;
for(var i=0;i<result.length;i++){
that.state.images.push({"pano":result[i].pano,"name":result[i].name});
}
that.setState({
images:images
})
}
})
}
loadOne(pano){
this.setState({
isClicked:true,
imageUrl:pano
})
}
render(){
var list=this.state.list;
return this.state.isClicked?<Redirect to={'/image/${this.state.imageUrl}'}/>:
<div> {this.state.images.map((result)=>{
return(<div className="box">
<div className="label">{result.name}</div>
<img src={result.pano} className="image col-md-3" onClick={this.loadOne.bind(this,result.pano)}/>
</div>
)
})}
</div>
}
}
module.exports={
FirstPage:FirstPage
}
Panorama.js
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import {Link} from 'react-router-dom';
class Panorama extends React.Component{
render(){
return(
<div>
<div className="pano">
<img id="myImage" src={props.match.params.id} />
<div className="goback"><Link to="/">Go back</Link></div>
</div>
)
}
}
module.exports={
Panorama:Panorama
}
With this the URL becomes something like this
http://localhost:8080/image/$%7Bthis.state.imageUrl%7D
after clicking on an image and nothing comes up on the screen.With this,
Redirect to={{pathname='/image',params:{this.state.imageUrl}}}
I get syntax errors
What is the correct way of doing this?

It looks like you are using single quotes instead of back-ticks to produce the string inside your to prop.
Try changing
<Redirect to={'/image/${this.state.imageUrl}'}/>
to:
<Redirect to={`/image/${this.state.imageUrl}`}/>

are you using react-router 3 i recommend you to use redirect function provided by react-router 3, that is this.context.router.push() to start redirect.
sample code in component :
class FirstPage extends React.Component{
constructor(context)
{
super(context)
}
...
}
FirstPage.contextTypes = {
router: PropTypes.object.isRequired
}
sample redirect action in react-router 3 :
this.context.router.push({ pathname: `/image${this.state.imageUrl}`})
sample redirect action in react-router 4 :
this.context.router.history.push({ pathname: `/image${this.state.imageUrl}`})