使用参数反应路由器链接答案

【问题标题】：React router link with params使用参数反应路由器链接
【发布时间】：2018-05-06 07:42:45
【问题描述】：

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;

在我的组件中，我有一个如下所示的链接：

CODE FOR MY LINK

"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;

点击特定作者时 PICTURE OF MY PAGE

它在此页面上重定向 PAGE FOR AUTHOR DETAILS

这工作正常。但是，当我从导航中单击其他链接时，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>

【问题讨论】：

你能显示导航栏的代码吗？
<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>
我更新了我的问题先生 :) 我包含了导航代码。谢谢

标签： reactjs parameters hyperlink react-router

【解决方案1】：

更新您的导航栏以使用绝对网址而不是相对网址：

<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>

【讨论】：