我有这样的 HTML 结构:
<body>
<nav>
<!--navigation elements -->
</nav>
<div className='main'>
<!--other elements -->
</div>
<div className='container'></div>
</body>
路由定义如下:
<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>
“容器”元素出现在所有路由上，但我不希望它在“/”路由上呈现。
我怎样才能停止<div className="container">从在 "/" 上呈现路线？我希望它在除 "/" 之外的所有其他路线上呈现.
我找到但不想使用的解决方案是显式插入带有 class="container" 的元素在我的 <Switch> 中呈现的每个组件中.有没有更好的办法？
最佳答案
您应该能够通过 nested routes 实现您的要求和一个 "no match route" .
想法是通过嵌套路由将结构引入路由，以限制 <div className="container"> 的呈现到非/路线。
为此，您可以提取一个呈现 WithContainer 的组件(即 <Route>)对于路径； /register , /login和 /profiles , 在 <div className="container"> 里面.然后你会改变你的 <Switch>现在为以下路由案例呈现两条路由；
- A
<Route/>呈现Landing与/完全匹配的组件 - A
<Route/>呈现您的新WithContainer没有特定路线的组件(即任何不完全匹配/的路径)
通过使用 <Switch>这样，它会导致路由行为呈现 Landing或 WithContainer (但不是两者)取决于第一个匹配的路线。我们利用该行为来限制 WithContainer 的呈现(反过来，<div className="container"> 元素)用于“非 /” 路由。
在代码中，这种方法可以表示为:
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>
)
希望对您有所帮助!
关于javascript - React Router : How to render element on all routes, 除了一个？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56700735/