Блог

Я использую react с django в бэкэнде. При нажатии на ссылку со страницы компонента я хочу, чтобы открылась соответствующая страница. Но страница ничего не отображает.

Это моя homepage.js где определен основной маршрутизатор реакции.

  <Router>
        <Navigation />
        <Switch>
            <Route exact path= "/">
                <Home />
            </Route>
            <Route path="/communication">
                <Communication />
            </Route>
            {/* <Route path="/forum-create" component={ForumCreate} /> */}
            <Route path="/calendar">
                <EventCalendar />
            </Route>
            <Route path="/information">
                <Informations />
            </Route>
            <Route path="/links">
                <Links />
            </Route>
        </Switch>
    </Router>
 

Я определил Route в другом, с которого я хочу отобразить страницу.

 import React from 'react'
import {BrowserRouter as Router, Switch, Route, Link, Redirect,} from 'react-router-dom'


function Communication() {
    return (
        <div>
            <Forum />
            {/* <Route path="/forum-create" component={ForumCreate} /> */}

        </div>
    )
}


function Forum() {
    return (
        <div>
            <h2 className="page-head">Forum</h2>
            <div className="forum">
                <Link to="forum-create">Create Topic</Link>
                <table className="forum-table">
                    <th>
                        <td>Topic</td>
                    </th>
                    <th>
                        <td>Date</td>
                    </th>
                    <th>
                        <td>Posted By</td>
                    </th>
                    <tr>
                        <td>Test Topic</td>
                        <td>20/05/2021</td>
                        <td>Awesome User</td>
                    </tr>
                    <tr>
                        <td>Test Topic</td>
                        <td>20/05/2021</td>
                        <td>Awesome User</td>
                    </tr>
                </table>
            </div>
        </div>
    )
}


function ForumCreate() {
    return (
        <div>
            Create a Topic Forum
            Some Chagnes
        </div>
    )
}

export default Communication
 

Я хочу визуализировать компонент ForumCreate() только со страницы связи. Я попытался ввести путь homepage.js внутрь Route , но все равно нажатие на Link него не загружает ForumCreate функцию.
Я могу визуализировать эту функцию, если она в homepage.js

Когда Communication компонент отображается текущий путь path="/communication" , так что, если вы сейчас предоставляете дополнительные маршруты, что есть другой путь префикс (т. е. нечто иное, чем «связь»), например path="/forum-create" , тогда, когда вам ссылку на этот маршрут Switch не соответствует «связь» и Communication компонент размонтирует, таким образом, отключение <Route path="/forum-create" component={ForumCreate} /> маршрут компонент.

Решение состоит в том, чтобы либо объявить маршрут создания форума на корневом уровне, Switch чтобы он всегда был доступен для сопоставления и визуализации, либо вложить его в качестве под-маршрута «/communication».

В качестве маршрута корневого уровня.

 <Router>
  <Navigation />
  <Switch>
    <Route exact path= "/">
      <Home />
    </Route>
    <Route path="/communication">
      <Communication />
    </Route>
    <Route path="/forum-create" component={ForumCreate} /> // <-- render in root
    <Route path="/calendar">
      <EventCalendar />
    </Route>
    <Route path="/information">
      <Informations />
    </Route>
    <Route path="/links">
      <Links />
    </Route>
  </Switch>
</Router>
 

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

 function Communication() {
  return (
    <div>
        <Forum />
        <Route
          path="/communication/forum-create" // <-- nested route
          component={ForumCreate}
        />
    </div>
  )
}

function Forum() {
  return (
    <div>
      <h2 className="page-head">Forum</h2>
      <div className="forum">
        <Link to="/communication/forum-create"> // <-- nested route
          Create Topic
        </Link>
        ...
      </div>
    </div>
  )
}