PROSAGA码农传奇-React-具有反应路由器v4的嵌套路由

0# 甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
   <pre>
    <code>
      interface IDefaultLayoutProps {
    children: React.ReactNode
}

const DefaultLayout: React.SFC<IDefaultLayoutProps> = ({children}) => {
    return (
        <div className="DefaultLayout">
            {children}
        </div>
    );
}

const LayoutRoute: React.SFC<IDefaultLayoutRouteProps & RouteProps> = ({component: Component, layout: Layout, ...rest}) => {
const handleRender = (matchProps: RouteComponentProps<{}, StaticContext>) => (
        <Layout>
            <Component {...matchProps} />
        </Layout>
    );

return (
        <Route {...rest} render={handleRender}/>
    );
}

const ScreenRouter = () => (
    <BrowserRouter>
        <div>
            <Link to="/">Home</Link>
            <Link to="/counter">Counter</Link>
            <Switch>
                <LayoutRoute path="/" exact={true} layout={DefaultLayout} component={HomeScreen} />
                <LayoutRoute path="/counter" layout={DashboardLayout} component={CounterScreen} />
            </Switch>
        </div>
    </BrowserRouter>
);

</code>
  </pre>
</DIV>

1# 明月清风上善若水自由如风 | 2019-08-31 10-32

2# v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    的<strong>
      在react-router-v4中，您不会嵌套
       <code>
        <Routes />
      </code>
      。相反，你把它们放在另一个里面
       <code>
        <Component />
      </code>
      。
    </强>
  </p>
  <HR />
  <P>
    例如
  </p>
   <pre>
    <code>
      <Route path='/topics' component={Topics}>
  <Route path='/topics/:topicId' component={Topic} />
</Route>

</code>
  </pre>
  <P>
    应该成为
  </p>
   <pre>
    <code>
      <Route path='/topics' component={Topics} />

</code>
  </pre>
  <P>
    同
  </p>
   <pre>
    <code>
      const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Link to={`${match.url}/exampleTopicId`}>
      Example topic
    </Link>
    <Route path={`${match.url}/:topicId`} component={Topic}/>
  </div>
)

</code>
  </pre>
  <HR />
  <P>
    这里有一个
    <a href="https://reacttraining.com/react-router/web/example/basic" rel="noreferrer">
      基本的例子
    </A>
     直接来自react-router
    <a href="https://reacttraining.com/react-router/web/guides/quick-start" rel="noreferrer">
      文件
    </A>
    。
  </p>
</DIV>

3# 無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    只是想提一下react-router
    的<strong>
      v4彻底改变了
    </强>
     因为这个问题被发布/回答了。
  </p>
  <P>
    没有
     <code>
      <Match>
    </code>
     组件了！
     <code>
      <Switch>
    </code>
    是确保只渲染第一个匹配。
     <code>
      <Redirect>
    </code>
     好..重定向到另一条路线。使用或遗漏
     <code>
      exact
    </code>
     进入或排除部分匹配。
  </p>
  <P>
    查看文档。他们都是伟大的。
    <a href="https://reacttraining.com/react-router/" rel="noreferrer">
      https://reacttraining.com/react-router/
    </A>
  </p>
  <P>
    这是一个我希望可以回答你的问题的例子。
  </p>
   <pre>
    <code>
        <Router>
   <div>
   <Redirect exact from='/' to='/front'/>
   <Route path="/" render={() => {
    return (
      <div>
      <h2>Home menu</h2>
      <Link to="/front">front</Link>
      <Link to="/back">back</Link>
      </div>
    );
  }} />          
  <Route path="/front" render={() => {
    return (
      <div>
      <h2>front menu</h2>
      <Link to="/front/help">help</Link>
      <Link to="/front/about">about</Link>
      </div>
    );
  }} />
  <Route exact path="/front/help" render={() => {
    return <h2>front help</h2>;
  }} />
  <Route exact path="/front/about" render={() => {
    return <h2>front about</h2>;
  }} />
  <Route path="/back" render={() => {
    return (
      <div>
      <h2>back menu</h2>
      <Link to="/back/help">help</Link>
      <Link to="/back/about">about</Link>
      </div>
    );
  }} />
  <Route exact path="/back/help" render={() => {
    return <h2>back help</h2>;
  }} />
  <Route exact path="/back/about" render={() => {
    return <h2>back about</h2>;
  }} />
</div>

</code>
  </pre>
  <P>
  </p>
  <P>
    希望它有所帮助，让我知道。如果这个例子没有足够好地回答你的问题，请告诉我，我会看看是否可以修改它。
  </p>
</DIV>

4# ❀⚘粉༵红༵回༵忆༵⚘❀ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    你可以尝试类似的东西
Routes.js
  </p>
   <pre>
    <code>
      import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom';
import FrontPage from './FrontPage';
import Dashboard from './Dashboard';
import AboutPage from './AboutPage';
import Backend from './Backend';
import Homepage from './Homepage';
import UserPage from './UserPage';
class Routes extends Component {
    render() {
        return (
            <div>
                <Route exact path="/" component={FrontPage} />
                <Route exact path="/home" component={Homepage} />
                <Route exact path="/about" component={AboutPage} />
                <Route exact path="/admin" component={Backend} />
                <Route exact path="/admin/home" component={Dashboard} />
                <Route exact path="/users" component={UserPage} />    
            </div>
        )
    }
}

export default Routes

</code>
  </pre>
  <P>
    App.js
  </p>
   <pre>
    <code>
      import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Routes from './Routes';

class App extends Component {
  render() {
    return (
      <div className="App">
      <Router>
        <Routes/>
      </Router>
      </div>
    );
  }
}

export default App;

</code>
  </pre>
  <P>
    我想你也可以从这里实现同样的目标。
  </p>
</DIV>

5# 無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    确实，为了嵌套路由，您需要将它们放在Route的子组件中。
  </p>
  <P>
    但是，如果您更喜欢更“内联”的语法而不是在组件之间打破路由，则可以使用
     <code>
      render
    </code>
     支持
     <code>
      <Route>
    </code>
     你想嵌入下，使用内联无状态功能组件，如下所示：
  </p>
   <pre>
    <code>
      <BrowserRouter>

</BrowserRouter>

</code>
  </pre>
  <P>
    如果你对原因感兴趣
     <code>
      render
    </code>
     应该用来代替
     <code>
      component
    </code>
    ，它是为了阻止内联组件在每个渲染上重新安装。
    <a href="https://reacttraining.com/react-router/web/api/Route/render-func" rel="noreferrer">
      请参阅文档
    </A>
     了解更多细节。
  </p>
  <P>
    另请注意，上面的示例使用
    <a href="https://reactjs.org/docs/fragments.html#short-syntax" rel="noreferrer">
      反应16片段
    </A>
     包装嵌套的路由，只是为了使它更清洁。在React 16之前，你可以使用一个容器
     <code>
      <div>
    </code>
     而是在这里。
  </p>
</DIV>

6# 一别而尽几念深i | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    有点像这样。
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          import React from 'react';
import {
  BrowserRouter as Router, Route, NavLink, Switch, Link
} from 'react-router-dom';

import '../assets/styles/App.css';

const Home = () =>
  <NormalNavLinks>
    <h1>HOME</h1>
  </NormalNavLinks>;
const About = () =>
  <NormalNavLinks>
    <h1>About</h1>
  </NormalNavLinks>;
const Help = () =>
  <NormalNavLinks>
    <h1>Help</h1>
  </NormalNavLinks>;

const AdminHome = () =>
  <AdminNavLinks>
    <h1>root</h1>
  </AdminNavLinks>;

const AdminAbout = () =>
  <AdminNavLinks>
    <h1>Admin about</h1>
  </AdminNavLinks>;

const AdminHelp = () =>
  <AdminNavLinks>
    <h1>Admin Help</h1>
  </AdminNavLinks>;

const AdminNavLinks = (props) => (
  <div>
    <h2>Admin Menu</h2>
    <NavLink exact to="/admin">Admin Home</NavLink>
    <NavLink to="/admin/help">Admin Help</NavLink>
    <NavLink to="/admin/about">Admin About</NavLink>
    <Link to="/">Home</Link>
    {props.children}
  </div>
);

const NormalNavLinks = (props) => (
  <div>
    <h2>Normal Menu</h2>
    <NavLink exact to="/">Home</NavLink>
    <NavLink to="/help">Help</NavLink>
    <NavLink to="/about">About</NavLink>
    <Link to="/admin">Admin</Link>
    {props.children}
  </div>
);

const App = () => (
  <Router>
    <div>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/help" component={Help}/>
        <Route path="/about" component={About}/>

</div>
  </Router>
);

export default App;
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>