Реагировать на связь маршрутизатора с параметрами - PullRequest
Новая
       11

Реагировать на связь маршрутизатора с параметрами

0 голосов
/ 06 мая 2018

У меня есть такой маршрут: КОД ДЛЯ МОЕГО МАРШРУТА 

import React from 'react';
import ErrorBoundary from './errorBoundary/errorPage';
import Home from './homePage';
import NotFoundPage from './notFoundPage';
import About from './about/aboutPage';
import Authors from './authors/authorPage';
import ManageAuthorPage from './authors/manageAuthorPage';
import { Switch, Route, Redirect, Router, NotFoundRoute } from 'react-router-dom';

class MyRouter extends React.Component{
  render(){
    return(
      <div>
        <Switch>
          <Route exact path="/app" name="app" component={Home}/>
          <Route exact path="/" component={Home}/>
          <Route path="/author" name="author" component={Authors} />
          <Route path="/about" name="about" component={About}/>
          <Route name="manageAuthor" path="/manageAuthor/:id" component={ManageAuthorPage} />
          <Route name="addAuthor" path="/addAuthor" component={ManageAuthorPage} />
          <Redirect from="/about/*" to="/about" />
          <Route component={NotFoundPage} />
        </Switch>
      </div>
    )
  }
}


export default MyRouter;

и в моем компоненте у меня есть ссылка, которая выглядит следующим образом:

КОД ДЛЯ МОЕЙ ССЫЛКИ 

"use strict";

import React from 'react';
import propTypes from 'prop-types';
import { Link } from 'react-router-dom';
import Router from 'react-router-dom';

class AuthorList extends React.Component{
  componentDidCatch(error, info) {
    console.log(error + " - " + info);
  }

  render(){
    var createAuthorRow = function(author){
      return (
        <tr key={ author.id }>
          <td><Link to={`/manageAuthor/${ author.id }`}>{ author.id }</Link></td>

          <td>{ author.firstName } { author.lastName }</td>
        </tr>
      );
    }

    return (
      <table className="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>NAME</th>
          </tr>
        </thead>
        <tbody>
          { this.props.authors.map(createAuthorRow, this) }
        </tbody>
      </table>
    );
  }
}

AuthorList.propTypes = {
  authors : propTypes.array.isRequired
};

AuthorList.defaultProps = {
  authors: []
};

export default AuthorList;

при нажатии на конкретного автора КАРТИНА МОЕЙ СТРАНИЦЫ

перенаправляет на эту страницу СТРАНИЦА ДЛЯ АВТОРСКИХ ДЕТАЛЕЙ

который работает нормально. Однако, когда я нажимаю другую ссылку из навигации, URL-адрес стал таким http://localhost:2345/manageAuthor/author, предположительно, он будет выглядеть следующим образом http://localhost:2345/author. Что не так с моим кодом. Пожалуйста, помогите мне разобраться. Спасибо. 

"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2"

код для моей навигации 

<ul className="nav navbar-nav">
  <li className="nav-item">
    <Link className="nav-link" to="app"> Dashboard </Link>
  </li>
  <li className="nav-item">
    <Link className="nav-link" to="author"> Authors </Link>
  </li>
  <li className="nav-item">
    <Link className="nav-link" to="about"> About </Link>
  </li>
</ul>

1 Ответ

0 голосов
/ 06 мая 2018

Обновите вашу панель навигации, чтобы использовать абсолютные URL-адреса вместо относительных: 

<ul className="nav navbar-nav">
  <li className="nav-item">
    <Link className="nav-link" to="/app"> Dashboard </Link>
  </li>
  <li className="nav-item">
    <Link className="nav-link" to="/author"> Authors </Link>
  </li>
  <li className="nav-item">
    <Link className="nav-link" to="/about"> About </Link>
  </li>
</ul>
...