class App extends Component {
render() {
return (
<Router>
<div style={{width: 1000, margin: '0 auto'}}>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/topics'>Topics</Link></li>
</ul>
<hr />
<Route exact path='/' component={Home} />
<Route path='/topics' component={Topics} />
</div>
</Router>
)
}
}
На данный момент ”принимает путь и компонент.Когда текущее местоположение вашего приложения совпадает с путем, компонент будет отображен.Если этого не произойдет, Route будет отображать ноль. ”
function Topics () {
return (
<div>
<h1>Topics</h1>
<ul>
{topics.map(({ name, id }) => (
<li key={id}>
<Link to={`/topics/${id}`}>{name}</Link>
</li>
))}
</ul>
<hr />
<Route path={`/topics/:topicId`} component={Topic}/>
</div>
)
}
, когда мы переходим к / themes , компонент Тема отображается. Topics затем отображает навигационную панель и новый маршрут, который будет соответствовать любой из ссылок в навигационной панели, которую мы только что визуализировали (, поскольку ссылки ссылаются на / themes / $ {id} иМаршрут совпадает с / themes /: topicId ).Это означает, что если мы нажмем на любую из ссылок в компоненте Темы.
Важно отметить, что только то, что мы сопоставили другой компонент маршрута, не означает, что предыдущие сопоставленные маршруты еще не отрисованы.Это то, что смущает многих людей.Помните, думайте о маршруте как о рендеринге другого компонента или нуля.То же самое, что вы думаете о вложении обычных компонентов в React, может применяться непосредственно к вложенным маршрутам .
На данный момент мы продвигаемся хорошо.Что если по какой-то причине другой член вашей команды, который не был знаком с React Router, решил изменить / топики на / концепты?Вероятно, они направятся к основному компоненту приложения и изменят маршрут
// <Route path='/topics' component={Topics} />
<Route path='/concepts' component={Topics} />
Проблема в том, что это полностью разрушает приложение.Внутри компонента Темы мы предполагаем, что путь начинается с / тем, но теперь он был изменен на / концепции.Нам нужен способ, чтобы компонент Темы мог получить любой начальный путь в качестве реквизита.Таким образом, независимо от того, изменяет ли родительский маршрут, он всегда будет работать.Хорошая новость для нас - React Router делает именно это.Каждый раз, когда компонент визуализируется с помощью React Router, этому компоненту передаются три реквизита - местоположение, соответствие и история.Тот, о ком мы заботимся, это матч.match будет содержать информацию о том, как был найден маршрут (именно то, что нам нужно).В частности, у него есть два свойства, которые нам нужны, путь и URL.Они очень похожи, вот как их описывают в документах -
path - Шаблон пути, используемый для сопоставления.Полезно для построения вложенных маршрутов
url - соответствующая часть URL.Полезно для создания вложенных ссылок
Предположим, что мы использовали приложение с вложенным маршрутом и текущим URL-адресом / themes / response-router / url-parameters.
Ifмы должны были зарегистрировать match.path и match.url в самом вложенном компоненте, вот что мы получим.
render() {
const { match } = this.props // coming from React Router.
console.log(match.path) // /topics/:topicId/:subId
console.log(match.url) // /topics/react-router/url-parameters
return ...
}
Обратите внимание, что путь включает параметры URL, а url - это полный URL-адрес.Вот почему один из них используется для ссылок , а другой - для маршрутов .
Когда вы создаете вложенную ссылку, вы не хотите использовать URLparamters.Вы хотите, чтобы пользователь буквально перешел на / themes / react-router / url-parameters .Вот почему match.url лучше для вложенных Links .Однако, когда вы сопоставляете определенные шаблоны с Route , вы хотите включить параметры URL - вот почему match.path используется для вложенных маршрутов .