[英]Exclude path from react-router <Router/>
請參閱我正在嘗試設置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
create party表單時,會顯示帶有id party的聚會詳細信息。
有沒有一種方法可以將/parties/create
從匹配項/parties/:id
排除?
如果您要同時擁有/parties/create
和/parties/:id
更改順序:
path =“ / parties / create”(第一個)
path =“ / parties /: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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.