Существует несколько способов передачи значений в React Routing.

Существует три способа передачи значений в маршрутизации реагирования: 1. метод «props.params», который может передавать одно или несколько значений, но тип каждого значения является строкой и не может передавать объект; 2. метод запроса, который Метод аналогичен методу get в форме. Параметры передаются в виде открытого текста, но параметры будут потеряны при обновлении страницы. 3. Метод состояния. При получении параметров "this.props.match.params. name" необходимо использовать в этом методе, а параметры при обновлении страницы также будут потеряны.

Операционная среда этого руководства: система Windows 10, версия 17.0.1, компьютер Dell G3.

Существует несколько способов передачи значений в React Routing.

Существует три способа передачи значений в маршрутах:

1.props.params (рекомендуется)

//Устанавливаем маршрутизацию <Router History={hashHistory}> <Route path='/user/:name' компонент={UserPage}></Route> </Router>import { Router,Route,Link,hashHistory} from 'react -router';class App расширяет React.Component { render() { return ( <Link to="/user/sam">user</Link> // или hashHistory.push("/user/sam"); ) } }

Когда страница перейдет на страницу UserPage, извлеките переданное значение:

класс экспорта по умолчанию UserPage расширяет React.Component{constructor(props){ super(props } render(){ return(<div>this.props.match.params.name</div>) }}

Вышеупомянутый метод может передавать одно или несколько значений, но тип каждого значения является строкой, и объект не может быть передан. Если он передан, объект json может быть преобразован в строку, а затем передан после его передачи. , json преобразует строку в объект и извлекает данные

//Определить маршрут <Route path='/user/:data' компонент={UserPage}></Route>//Установить параметры var data = {id:3,name:sam,age:36};data = JSON. stringify(data);var path = `/user/${data}`;//Передаем значение <Link to={path}>user</Link>//или hashHistory.push(path);//Получаем параметр var данные = JSON.parse(this.props.params.data);var {id,name,age} = data;

2.запрос (не рекомендуется: параметры обновления страницы теряются)

Метод запроса очень прост в использовании и похож на метод get в форме, а параметры передаются в виде обычного текста.

//Определяем маршрут <Route path='/user' компонент={UserPage}></Route>//Установляем параметры var data = {id:3,name:sam,age:36};var path = { pathname:' /user', query:data,}//Передать значение <Link to={path}>user</Link>//или hashHistory.push(path);//Получить параметр var data = this.props.location.query ;var {id,имя,возраст} = данные;

3.состояние (не рекомендуется, параметры страницы обновления теряются)

Режим состояния аналогичен режиму публикации, а его использование аналогично запросу.

//Установка маршрутизации <Route path='/user' компонент={UserPage}></Route>//Установка параметров var data = {id:3,name:sam,age:36};var path = { pathname:' /user', state:data,}//Передать значение <Link to={path}>user</Link>//или hashHistory.push(path);//Получить параметр var data = this.props.location.state ;var {id,имя,возраст} = данные;

Специальные советы:

1. Используйте this.props.match.params.name при получении параметров.

2. При печати в подкомпоненте не забудьте передать this.props следующим образом:

class Todolist расширяет компонент { render() { return ( <DocumentTitle title="todolist"> <div id="home-container"> <section> <TodolistList {...this.props}/> //Если не передать это .props — пустой объект </section> </div> </DocumentTitle> } }export Todolist по умолчанию;