reactjs - 使用参数反应路由器链接
问题描述
我有这样的路线: 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;
在我的组件中,我有一个如下所示的链接:
"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;
点击我的页面的具体作者 图片
它在此页面上重定向 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>
解决方案
更新您的导航栏以使用绝对 URL 而不是相对 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>
推荐阅读
- generics - 如何修复在 MutableSet 的 MutableList 上应用 reduce 以查找所有集合的交集的类型错误?
- javascript - 使用 Angular2“ngForm.valid”时不应用“min”验证规则
- mysql - Laravel 查询获取最大数量的前 10 条记录
- java - Junit 处理 try catch 语句中的异常
- sql-server - 无法从 SQL Server 数据工具连接到服务器
- vue.js - 使用 Vue 和 Axios 上传多个文件
- activemq-artemis - 如何在管理控制台上显示新队列的创建选项卡?
- c# - 通过 InputSimulator C# 转发一系列扫描码
- vb.net - 我想使用 VB.NET 从事件日志中列出最后 20 个条目
- java - 带有 Spring Boot 错误的 JBOSS 上的 Soap 服务