Создайте уникальную страницу для 151 различных профилей, используя реактивный маршрутизатор

Question

Это мой первый раз, когда я использую реактивный маршрутизатор, поэтому я немного смущен тем, как это сделать. На моей домашней странице у меня есть 151 уникальные миниатюры монстров. Когда пользователь нажимает на один из миниатюр, я хочу, чтобы пользователь был отправлен на страницу показа монстров. Для HREF монстров, я использую свой индекс, чтобы создать уникальный URL:

{this.props.pokeList.map((pokemon, index) => { 
    return (
    <div key={index} className="col-xs-6 col-md-2"> 
     <a style={aTagStyle} href={index + 1} className="thumbnail"> 
     <img src={`https://s3-eu-west-1.amazonaws.com/calpaterson-pokemon/${index + 1}.jpeg`} style={imgStyle} /> 
     <p style={textStyle}>{pokemon.entry_number}</p> 
     <p style={textStyle}>{pokemon.pokemon_species.name}</p> 
     </a> 
    </div> 
); 
})} 

Это мой текущий файл маршруты:

class PokedexRouter extends Component { 
    render() { 
    return (
     <Router history={ hashHistory } > 
     <Route path='/' component={App} > 

     </Route> 
     </Router> 
    ); 
    } 
} 

Создание пути маршрута = «/ 1» весь путь до 151 в моих файлах маршрут определенно не кажется правильным. Пользователь также может ввести число> 152 после localhost: 3000/в адресной строке, чтобы как это предотвратить?

Любая помощь была бы принята с благодарностью, спасибо!

Answer 1

Использовать реактивный маршрутизатор Router параметров. Вы можете использовать onEnter для перенаправления, если пользователь пытается ввести значение, которое не поддерживается.

const validatedImageId = (nextState, replace, callback) => { 
    const imageId = parseInt(nextState.params.imageId, 10); 

    if(isNaN(imageId) || imageId < 0 || imageId > 151) { 
     replace('/'); // redirect to main page 
    } 

    callback(); 
}; 

class PokedexRouter extends Component { 
    render() { 
    return (
     <Router history={ hashHistory } > 
     <Route path='/' component={App} > 
      <Route path='image/:imageId' component={ImagePage} onEnter={ validatedImageId } /> // the imageId will be a parameter, that the ImagePage component will receive 
     </Route> 
     </Router> 
    ); 
    } 
} 

{this.props.pokeList.map((pokemon, index) => { 
    return (
    <div key={index} className="col-xs-6 col-md-2"> 
     <Link style={aTagStyle} to={ `image/${index + 1}` } className="thumbnail"> // use react-router Link component to link to the route 
     <img src={`https://s3-eu-west-1.amazonaws.com/calpaterson-pokemon/${index + 1}.jpeg`} style={imgStyle} /> 
     <p style={textStyle}>{pokemon.entry_number}</p> 
     <p style={textStyle}>{pokemon.pokemon_species.name}</p> 
     </a> 
    </div> 
); 
})} 

const ImagePage = ({ params }) => (// extract the params from the props 
    <img src=`https://s3-eu-west-1.amazonaws.com/calpaterson-pokemon/${ params.imageId }.jpeg`} /> // use params.imageId to get the original index of the image 
);