React Router 4 настроен для базовой маршрутизации.*
Структура файла: Index.jsx — это файл, который свяжет компонент приложения с HTML-страницей. В App.jsx я буду определять маршруты, а HomePage.jsx — еще один компонент, в котором я могу использовать маршруты, определенные в App.jsx, с помощью ссылок.
src |_Components |_HomePage.jsx |_AddComposer.jsx |_App.jsx Index.js
Вот как выглядит Index.js
import React from 'react'; import ReactDOM from 'react-dom'; import {Route, Link,BrowserRouter as Router} from 'react-router-dom' import App from './Components/App.jsx'; ReactDOM.render(<App />, document.getElementById('app'); //^ rendering App Component in index.html(not shown in file structure)
В App.jsx я буду определять маршруты и устанавливать данные в состоянии.
import React from 'react'; import HomePage from './Components/HomePage.jsx'; class App extends React.Component { constructor(props) { super(props) { this.state= { data: [{name: 'Chopin', age: 39}, {name: 'Bach', age: 65}] } } } render() { return ( <Router> <div> <Route exact path="/"render={(props) => (HomePage data={this.state.data}/>)} <Route path="/addComposer" render={(props) => (<AddComposer/>)} /> <div> </Router> </div> ) } } export default App;
Сейчас определены два маршрута. Если конечной точкой является «/» (т.е. по умолчанию localhost:3000/), HomePage.jsx будет отображаться с передачей набора данных в this.state.
Путь также был определен для «/addComposer». Если мы введем localhost:3000/addComposer** в нашем браузере, будет отображен компонент AddComposer.
Теперь, когда маршруты определены в компоненте приложения, давайте их использовать! Введите Ссылки.
import React from 'react'; import {Link} from 'react-router-dom'; class AddComposer extends Component { constructor(props) { super(props) } render () { return ( <div> <div> Name <input type="text" /> Image Url <input type="text" /> <Link to="/"><button type="submit">Submit</button></Link> </div> </div> ) } } export default AddComposer;
^ Достаточно просто, верно? Вы можете инкапсулировать любой элемент, на который хотите добавить ссылку, с помощью ‹Link to= «желаемый маршрут, как определено в App.jsx»›‹/Link›.
В этом случае, когда пользователь нажимает кнопку «Отправить», он будет перенаправлен на HomePage.jsx.
Надеюсь это поможет..!
См.: https://reacttraining.com/react-router/
* Предполагая, что у вас уже настроено приложение для реагирования (например, веб-пакет, зависимости, файловая система). Я показываю только файловую структуру исходного кода в приложении React. Вы можете увидеть образец приложения и файловую структуру здесь.
**localhost:3000 — это пример IP-адреса для локального сервера Node. Пример можно посмотреть здесь.