Question

我想为一组路径设置一个布局，为另一组路径设置另一个布局。这是我的route.jsx：

import React from 'react';                                                                          
import { Route, Switch } from 'react-router-dom';                                                   
import Main from './components/main';                                                               
import Home from './components/home';                                                               
import MyWork from './components/work/myWork';                                                      
import WorkShow from './components/work/workShow';                                                  

const DefaultLayout = ({ children }) => (                                                           
  <div>                                                                                             
    <Main children={children} />                                                                    
  </div>                                                                                            
);                                                                                                  

const Work = () => (                                                                                
  <Switch>                                                                                          
    <Route exact path="/my-work" component={MyWork} />                                              
    <Route path="/my-work/:workName" component={WorkShow} />                                        
  </Switch>                                                                                         
);                                                                                                  

const routes = (                                                                                    
  <DefaultLayout>                                                                                   
    <Switch>                                                                                        
      <Route exact path="/" component={Home} />                                                     
      <Route path="/my-work" component={Work} />                                                    
    </Switch>                                                                                       
  </DefaultLayout>                                                                                  
);                                                                                                  

export default routes;

如何添加另一个具有BlogLayout布局的路由器，例如：

<BlogLayout>
  <Switch>
    <Route path="/blog" component={Blog} />
  </Switch>
</BlogLayout>

Answer 1

假设您希望const { HashRouter, Route, Switch, Link, Redirect } = ReactRouterDOM const DefaultLayout = ({ children }) => ( <div> <p>Main layout</p> {children} </div> ); const AltLayout = ({ children }) => ( <div> <p>Alternate layout</p> {children} </div> ); const Home = () => ( <span>Home</span> ); const Work = () => ( <span>Work</span> ); const Blog = () => ( <span>Blog</span> ); ReactDOM.render(( <HashRouter> <div> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/work">Work</Link></li> <li><Link to="/blog">Blog</Link></li> </ul> <p>The rendered route component:{' '} <Switch> <Route exact path="/" render={() => <DefaultLayout><Home /></DefaultLayout>} /> <Route path="/work" render={() => <DefaultLayout><Work /></DefaultLayout>} /> <Route path="/blog" render={() => <AltLayout><Blog /></AltLayout>} /> </Switch> </p> </div> </HashRouter> ), document.getElementById('app'))路径包含在交换机中，您可以使用render function of the <Route> component：

<HashRouter>

注意，对于working example on Codepen，我必须使用application\/.*?(?:msword|x-ms|vnd\.ms-|officedocument)，但无论您选择何种路由器，这都应该有效。

不同的布局 - React Router v4

1 个答案: