不同的布局 - React Router v4

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

假设您希望 /blog 路径包含在开关中，您可以使用 render function of the <Route> component:

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'))

请注意，对于 working example on Codepen，我不得不使用 <HashRouter>，但无论您选择哪种路由器，这都应该有效。

不同的布局 - React Router v4

Different Layout - React Router v4

reactjs

react-router

react-router-v4