Как сделать отображение элемента при перезагрузке страницы?

Question

[Владислав]

Вопрос по React routing,
Мне нужно, чтобы при перезагрузке страницы по адресу, допустим:
localhost:3000/more_id1
Отображалась та же информация, что и если я перейду по специальной ссылке для перехода на ту же страницу. Проблема в том, что я по нажатию на кнопку 'подробнее' передаю id отображаемого элемента в компонент и перенаправляю туда юзера. Как сделать так, чтобы если дать человеку ссылку (localhost:3000/more_id1) он мог просто по ней перейти и увидеть отображаемый объект?

Answer 1

[Антон Спирин]

Я вам писал в прошлом вопросе как это сделать.
Измените свой роут:
<Route path="/more/:id" component={More}/>

измените ссылку:

<Link to={`more/${this.props.itemId}`} className="descr">подробнее</Link>

измените компонент:

export default function More(props){
    const { id } = props.match.params;
    const item =props.items[id];
    const { id, title, descr, img, price } = item;
    
    return(
        <div className="more__info">
           ...
        </div>
    );
}

А ссылка для перехода будет не такая:
localhost:3000/more_id1
а, при id = 1 такая:
localhost:3000/more/1

Comments

[Владислав]

TypeError: Cannot read property 'params' of undefined

import React, {Component} from 'react';
import {Link} from 'react-router-dom';

import '../css/more.css';

export default class More extends Component{
    constructor(props){
        super(props);
        
        this.handleDisplayReturn = this.handleDisplayReturn.bind(this);
        this.handleErrorReturn = this.handleErrorReturn.bind(this);
    }
    render(){
        const itemId = this.props.match.params;
        const item =this.props.items[itemId];
        const { id, title, descr, img, price } = item;
        return(
            <div className="more__info">
            <img src={img} alt=""/>
            <div className="title"> 
                <h1 className="title__name">{title}</h1>
                <p className="descr">
                    {descr}
                </p>
                <div className="wrap">
                    <Link to="/shop" className="back">Назад</Link>
                </div>
            </div>
        </div>
        );
}
}

[Антон Спирин]

Vladislav, вы запутались. Откуда в render взяться this.props.activeItem, если вы его туда не передаете?

Исправить можно так:

import React, {Component} from 'react';
import {Link} from 'react-router-dom';

import '../css/more.css';

export default class More extends Component{
    renderItem(item) {
      const { id, title, descr, img, price } = item;
     
      return(
        <div className="more__info">
          ...   
        </div>
       );
    }
        
    renderEmpty(){
        return (
          <div className="wrap">
              <Link to="/shop" className="back">Назад</Link>
           </div>
        )
    }

    render(){
      const { id } = this.props.match.params;
      const item = this.props.items[id];
      return item ? this.renderItem(item) : this.renderEmpty();
    }
}

И не пишите бинды в конструкторах, для этого есть inline arrow function

[Владислав]

Антон Спирин,
Пишет:

TypeError: Cannot read property 'params' of undefined

[Антон Спирин]

Vladislav, текущий код роутов и компонента покажите.

[Владислав]

App.jsx

import React, {Component} from 'react';
import {Route, Switch} from 'react-router-dom';

import items from './item_db';

import Nav from './components/Nav';
import Footer from './components/Footer';

import Home from './pages/Home';
import About from './pages/About';
import Items from './pages/Items';
import Contact from './pages/Contact';
import More from './pages/More';
import NotFound from './pages/NotFound';

class App extends Component{
    constructor(props){
        super(props);
        this.state ={
            activeItemId: null
        };
        this.selectItem = this.selectItem.bind(this)
    }
    selectItem(itemId){
        console.log("Item ID " + itemId);
        this.setState({activeItemId: itemId},()=>{console.log("State: " + this.state.activeItemId)});
    }
    handleItemIdReceiver(){
        this.setState({itemId: []})
    }
    render(){
        const {activeItemId} = this.state;    
        return (
            <main>
                <Nav/>
                    <div className="content">
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route exact path="/about" component={About}/>
                        <Route exact path="/shop" render={()=> <Items items={items} onSelectItemCallback={this.selectItem} />}/>
                        <Route exact path="/contact" component={Contact} />
                        <Route exact path="/more/:id" render={()=> <More items={items}/>}/>
                        <Route exact component={NotFound} />
                        <Footer/>
                    </Switch>
                </div>
            </main>
        );
    }
}
export default App;

More.jsx

import React, {Component} from 'react';
import {Link} from 'react-router-dom';

import '../css/more.css';

export default class More extends Component{
    renderItem(item) {
      const { id, title, descr, img, price } = item;
     
      return(
        <div className="more__info">
            <div className="more__info">
            <img src={img} alt=""/>
            <div className="title"> 
                <h1 className="title__name">{title}</h1>
                <p className="descr">
                    {descr}
                </p>
                <div className="wrap">
                    <Link to="/shop" className="back">Назад</Link>
                </div>
            </div>
        </div>           
        </div>
       );
    }
        
    renderEmpty(){
        return (
                <div className="wrap">
                    <Link to="/shop" className="back">Назад</Link>
                </div>
        )
    }

    render(){
      const itemId = this.props.match.params;
      const item =this.props.items[itemId];
      return item ? this.renderItem(item) : this.renderEmpty();
    }
}

[Антон Спирин]

Vladislav, вы используете в router функцию render и сами все ломаете не передавая match в аргументах.

Так должно работать:

<Route exact path="/more/:id" render={props => (<More {...props} items={items}  />)} />

И я код поправил:

render(){
      const { id } = this.props.match.params;
      const item = this.props.items[id];
      return item ? this.renderItem(item) : this.renderEmpty();
    }

Было не правильно.

[Владислав]

Антон Спирин, спасибо огромное, что помогли! Даже не знаю, как вас отблагодарить.