React Router：如何在所有路由上渲染元素，除了一个？
[英]React Router: How to render element on all routes, except one?
问题描述
I have HTML structure like this:
我有这样的 HTML 结构：
<body>
<nav>
<!--navigation elements -->
</nav>
<div className='main'>
<!--other elements -->
</div>
<div className='container'></div>
</body>
And routing defined like this:路由定义如下：
<Router>
<Fragment>
<Navbar />
<Route exact path="/" component={Landing} />
<div className="container">
<Alert />
<Switch>
<Route exact path="/register" component={Register} />
<Route exact path="/login" component={Login} />
<Route exact path="/profiles" component={Profiles} />
</Switch>
</div>
</Fragment>
</Router>
The "container" element is present on all routes however I do not want it to be rendered on the "/" route. “容器”元素存在于所有路由上，但我不希望它在“/”路由上呈现。
How can I stop <div className="container"> from being rendered on the "/" route?如何阻止<div className="container">在"/"路由上呈现？ I want it to be rendered on all other routes except of "/" .我希望它在除"/"之外的所有其他路线上呈现。
A solution I found, but don't want to use is to explicitly insert the element with class="container" in each component that is rendered in my <Switch> .我发现但不想使用的解决方案是在我的<Switch>呈现的每个组件中显式插入带有class="container"的元素。 Is there a better way?有没有更好的办法？
3 个解决方案
解决方案1
6 已采纳 2019-06-21 10:09:43
You should be able to achieve what you require via nested routes and a "no match route" .您应该能够通过嵌套路由和“无匹配路由”实现您的需求。
The idea would be to introduce structure to your routing via nested routes, to restrict rendering of <div className="container"> to non / routes.这个想法是通过嵌套路由将结构引入路由，以限制<div className="container">渲染为非/路由。
To do this, you could extract a component (ie WithContainer ) that renders a <Route> for paths;为此，您可以提取一个为路径呈现<Route>的组件（即WithContainer ）； /register , /login and /profiles , inside of the <div className="container"> . /register 、 /login和/profiles ，位于<div className="container"> 。 You would then change your <Switch> to now render two routes for the following route cases;然后，您将更改<Switch>以现在为以下路线情况呈现两条路线；
- A
<Route/>that renders theLandingcomponent on an exact match of/<Route/>将Landing组件呈现在/的完全匹配上 - A
<Route/>that renders your newWithContainercomponent on no specific route (ie any path that does not exactly match/)一个<Route/>，它在没有特定路线（即不完全匹配/任何路径）上呈现您的新WithContainer组件
By using the <Switch> in this way, it causes the routing behaviour to render either Landing or WithContainer (but not both) depending on the first matched route.通过以这种方式使用<Switch> ，它会导致路由行为根据第一个匹配的路由呈现Landing或WithContainer （但不是两者）。 We take advantage of that behaviour to restrict rendering of the WithContainer (and in turn, the <div className="container"> element) for "non / " routes.我们利用这种行为来限制“非/ ”路由的WithContainer （以及<div className="container">元素）的呈现。
In code, this approach could be expressed as:在代码中，这种方法可以表示为：
const WithContainer = () => (
<div className="container">
{ /* Wrap routes in container div */ }
<Route exact path="/register" component={Register} />
<Route exact path="/login" component={Login} />
<Route exact path="/profiles" component={Profiles} />
</div>)
const Main = () => (
<main>
<Switch>
<Route exact path='/' component={Landing}/>
<Route component={ WithContainer } /> {/* No match route */ }
</Switch>
</main>
)
Hope that helps!希望有帮助！
解决方案2
4 2019-06-21 10:26:53
With the latest version of React Router, you can provide an array of strings for the path prop so that a specific route renders on multiple matches:使用最新版本的 React Router，您可以为path属性提供一个字符串数组，以便特定路由在多个匹配项上呈现：
<Route path={['/one', '/two', '/three']} component={SomeComponent} />
Here's a link to the relevant documentation: https://reacttraining.com/react-router/web/api/Route/path-string-string .这是相关文档的链接： https : //reacttraining.com/react-router/web/api/Route/path-string-string 。
解决方案3
2 2020-02-18 05:55:33
If you don't want to create a separate component, you can just do this.如果你不想创建一个单独的组件，你可以这样做。 You need to keep the inner switch as well, if you want to keep the original functionality.如果您想保留原始功能，您还需要保留内部开关。
// parent switch
<Switch>
<Route exact path="/" component={Landing} />
// start route wrap!!!
<Route>
<div className="container">
<Switch>
<Route exact path="/register" component={Register} />
<Route exact path="/login" component={Login} />
<Route exact path="/profiles" component={Profiles} />
</Switch>
</div>
</Route>
// end route wrap!!!
</Switch>
You should think of Routes as of any other UI components.您应该将 Routes 视为任何其他 UI 组件。 You can nest them arbitrarily.您可以任意嵌套它们。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.