[英]Exclude path from react-router <Router/>
See I'm trying to setup a react-router app. 请参阅我正在尝试设置React-Router应用程序。 I have /parties
, the list of all parties and then I have /parties/:id
which give me a detail page of a party and /parties/create
where I have a form to create a party. 我有/parties
,所有聚会的列表,然后有/parties/:id
,它为我提供了聚会的详细信息页面,并且/parties/create
在这里有创建聚会的表单。
Now, I'm trying to have my main resource always on the left side of my screen and my sub-resource always on the right side of my screen. 现在,我尝试将主资源始终放在屏幕的左侧,将子资源始终放在屏幕的右侧。
This is how I set it up: 这是我的设置方式:
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>
}
But now when I go to /parties/create
a create party form and a party detail with id party show up. 但是现在当我转到/parties/create
create party表单时,会显示带有id party的聚会详细信息。
Is there a way to exclude /parties/create
from the match /parties/:id
? 有没有一种方法可以将/parties/create
从匹配项/parties/:id
排除?
If you want to have both /parties/create
and /parties/:id
change the order: 如果您要同时拥有/parties/create
和/parties/:id
更改顺序:
path="/parties/create" (first) path =“ / parties / create”(第一个)
path="/parties/:id" (last) path =“ / parties /:id”(最后一个)
If another path with /parties/:something? 如果使用/ parties /:something的其他路径? exists before it will enter this route. 在进入此路线之前存在。
Thats because "/parties/:id"
matches anything after /parties/#####
Also note you will have to add the Switch
component so only one path is rendered at time. 那是因为"/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);
https://codesandbox.io/s/withered-lake-o9kx4 https://codesandbox.io/s/withered-lake-o9kx4
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.