Question

我有这样的路线： CODE FOR MY ROUTER

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

工作正常。但是，当我点击导航中的其他链接时，网址就像 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>

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

与params反应路由器链接

1 个答案: