Как связать с Маршрутами внутри компонента, представленного другим Маршрутом с React Router

Question

Я пытаюсь использовать реактивный маршрутизатор в моем приложении activjs.И я столкнулся с этой проблемой:

Вот что я пытаюсь сделать:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import About from '../Pages/About';
import Home from '../Pages/Home';
import Topics from '../Pages/Topics';
import LinkTest from '../Pages/LinkTest';

class AppRouter extends Component {
  render() {
    return (
        <Router>
          <div>
            <ul>
              <li>
                <Link to="/home">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
              <li>
                <Link to="/topics">Topics</Link>
              </li>
              <Route path="/home" component={LinkTest}/>
            </ul>

            <hr />

            <Route path="/home" component={Home}/>
            <Route path="/about" component={About} />
            <Route path="/topics" component={Topics} />

          </div>
      </Router>
    );
  }
}

export default AppRouter;

Игнорировать компоненты "about" и "topic", когда я нажимаю на ссылку "Главная",он должен быть нацелен на 2 маршрута, один будет отображать «LinkTest», а другой - «Home».

Вот что внутри "LinkTest":

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class LinkTest extends Component {
  render() {
      const {match}=this.props;
    return (
        <div>
            <Link to={`${match.url}/Test`}>Link To Test</Link>
        </div>
    );
  }
}

export default LinkTest;

А внутри моего "Домашнего" компонента:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import Test from './Test';

class Home extends Component {
  render() {
      const {match} = this.props;
      console.log(match.url);
    return (
        <Router>
            <div>
                <h2>
                    Hello from Home page
                    <Link to={`${match.url}/Test`}>Link To Test</Link>
                    <Route path={`${match.url}/Test`} component={Test}/>
                </h2>

            </div>
        </Router>

    );
  }
}

export default Home;

Однако:

• Когда я нажимаю на ссылку внутри компонента "LinkTest" (который отображался ранее), URL-адрес в браузере отображается "http://localhost:3000/home/Test",, но ничего не происходит.

• Когда я щелкнул ссылку внутри компонента «Домой» (который отображался в то же время, что и «LinkTest» по той же ссылке), в браузере показывался тот же URL-адрес: «http://localhost:3000/home/Test", только этораз он рендерил компонент «Тест».

Почему это происходит?(чего я хочу добиться, так это того, что я хочу использовать ссылку внутри «LinkTest» для рендеринга компонента «Test» внутри компонента «Home» или чего-то подобного).

Надеюсь, это достаточно ясно.

Answer 1

Если вам нужна вложенная маршрутизация внутри ComponentB, вы должны добавить Link с для этих Route с.И используйте match.url и match.path для создания вложенных Link s и Route s.

const ComponentB = ({ match }) => {
    return (
        <div> 
            <div>
                <ul>
                    <li><Link to={`${match.url}/c`}>Component C</Link></li>

                    // more Links
                    <li><Link to={`${match.url}/css`}>CSS</Link></li>
                    <li><Link to={`${match.url}/react`}>React</Link></li>
                </ul>
            </div>
            <div>
                <Route path={`${match.path}/c`} component={ComponentC} />

                // more nested Routes
                <Route path={`${match.path}/css`} render={() => { return <h1>CSS</h1> }}/>
                <Route path={`${match.path}/react`} render={() => { return <h1>React</h1> }}/>
            </div>
        </div>
    );
}

---

Вложенная маршрутизация

Компоненты, созданные с помощью Маршрут будут автоматически переданы следующие prop объекты: match, location и history.

Используя match, вы можете реализовать вложенные Route s.Объект match содержит следующие свойства:

• params - (объект) Пары ключ / значение, проанализированные из URL-адреса, соответствующего динамическим сегментам пути
• isExact - (логическое значение) true, если весь URL был сопоставлен (без завершающих символов)
• path - (строка) Шаблон пути, используемый для сопоставления.Полезно для построения вложенных Route s
• url - (строка) Соответствующая часть URL.Полезно для строительства вложенных Link с

---

Ссылка

1. https://medium.freecodecamp.org/beginners-guide-to-react-router-4-8959ceb3ad58
2. https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

Answer 2

Вы можете сделать это следующим образом:

<Route exact path='/a' component={A} />
<Route path='/b' component={B} />

// Following should be router inside Component B
<Route exact path='/b/abc' component={OtherComponent}

Если хотите, я подготовил несколько примеров реакции-маршрутизатора 4.Они размещены здесь.https://github.com/SandipNirmal/react-router-examples