javascript - 从反应路由器中排除路径
问题描述
请参阅我正在尝试设置 react-router 应用程序。我有/parties
,所有派对的列表,然后我有/parties/:id
一个派对的详细信息页面,/parties/create
我有一个表格来创建派对。
现在,我试图让我的主要资源始终位于屏幕左侧,而我的子资源始终位于屏幕右侧。
这就是我的设置方式:
return <div>
<div>
<nav>
<h1>Gamevote</h1>
<AuthWidget authService={this.authService}/>
</nav>
<div class="content cnt" ref={this.content}>
<this.PrivateRoute path="/" exact component={() => <Redirect to="/parties"/>} />
<Route path="/register" exact component={() => <Register/>} />
<Route path="/login" exact component={() => <Login authService={this.authService}/>} />
<this.PrivateRoute path="/parties/:selectedParty?" component={this.AutowiredPartyList} />
</div>
<div class="big-content cnt" ref={this.bigContent}>
<this.PrivateRoute path="/party/create" partyService={this.partyService} exact component={() => <this.AutowiredCreateParty/>}/>
<this.PrivateRoute path="/parties/:party" exact component={PartyView}/>
</div>
<this.PrivateRoute path="/logout" exact component={this.Logout}/>
</div>
</div>
}
但是现在当我去/parties/create
创建派对表格时,会出现一个带有 id 派对的派对详细信息。
有没有办法/parties/create
从比赛中排除/parties/:id
?
解决方案
如果您想同时拥有两者/parties/create
并/parties/:id
更改顺序:
path="/party/create" (第一)
path="/party/:id" (最后一个)
如果 /parties/:something 的另一条路径?在它进入这条路线之前就存在了。
那是因为"/parties/:id"
匹配之后的任何内容/parties/#####
另请注意,您必须添加Switch
组件,因此一次只呈现一个路径。
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
function Index() {
return <h2>Home</h2>;
}
function About() {
return <h2>About create</h2>;
}
function AboutId() {
return <h2>About with ID</h2>;
}
function Users() {
return <h2>Users</h2>;
}
function AppRouter() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/users/">Users</Link>
</li>
<li>
<Link to="/about/create">About</Link>
</li>
<li>
<Link to="/about/1">About with id</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/" exact component={Index} />
<Route path="/users/" component={Users} />
<Route path="/about/create" component={About} />
<Route path="/about/:id" component={AboutId} />
</Switch>
</div>
</Router>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<AppRouter />, rootElement);
推荐阅读
- javascript - Three.js,自定义着色器,填充png纹理和设置透明度?
- c# - 使用反射从属性中获取
- testing - TestCafe 无法在测试运行之外使用 testController (t)(例如,作为跳过测试的条件)
- reactjs - 在常规 JavaScript 中传递 React 状态(头盔)
- actionscript-3 - 在 Workers > Performance Hit 之间传递 20,000 个对象?
- r - 有没有办法使用颜色和阴影来绘制堆积条形图来区分类别?
- elixir - 使用“eval”开始混合发布时无法连接到 libcluster
- python - 如何比较和匹配来自同一数据框不同列的数据
- azure - Azure Servicebus 锁定删除
- .net - OpenTelemetry 收集器导出到 Prometheus 不起作用