webentwicklung-frage-antwort-db.com.de

Reagieren Sie in Router v4 verschachtelte Routen props.children

Ich aktualisiere meine universelle reag redux app, um den reakt v4 zu verwenden. Ich habe verschachtelte Routen unter einer Haupt-Layout-Route. Früher habe ich {props.children} verwendet, um den Inhalt untergeordneter Routen anzuzeigen. Dies funktioniert jedoch nicht mehr. Wie funktioniert das in V4? 

<Provider store={store} key="provider">
  <div>
    <Route component={Layout} />
    <Switch>
      <Route path="/" component={HomePage} />
      <Route component={Error404} />
    </Switch>
  </div>
</Provider>

oder 

<Provider store={store} key="provider">
  <Layout>
    <Route path="/" component={HomePage} />
    <Route component={Error404} />
  </Layout>
</Provider>

So sieht meine Layout-Datei aus

const Layout = props => (
 <div className="o-container">
   <Header />
     <main>
      {props.children}
     </main>
   <Footer />
 </div>
);
17
Graeme Paul

Ich habe den <Provider>out genommen, weil er zu react-redux gehört, und Sie brauchen ihn nicht als Grundlage für das Routing mit react-router (trotzdem können Sie ihn leicht hinzufügen, indem er die Struktur einkapselt).

In React Router V4 wurde die Router in BrowserRouter umbenannt und aus dem Paket react-router-dom importiert. Für Verschachtelungsrouten müssen Sie diese als untergeordnete Elemente Ihres <Layout> einfügen.

index.js 

import { Switch, Route } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
import Layout from './Layout';
...
const Root = () => (
  <Layout>
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/other" component={OtherComponent} />
        <Route component={Error404} />
      </Switch>
    </BrowserRouter>
  </Layout>
);

ReactDOM.render(
  <Root/>,
  document.getElementById('root')
);

Layout.js 

import React from 'react';
import Header from './Header';
import Footer from './Footer';

const Layout = props => ({
  render() {
    return (
      <div className="o-container">
        <Header />
        <main>{props.children}</main>
        <Footer />
      </div>
    );
  }
});

export default Layout;

Berücksichtigen Sie, dass dies nur für das Web funktioniert. Die native Implementierung unterscheidet sich.
Ich habe ein kleines Projekt hochgeladen, das in Create React App erstellt wurde, wo ich die Implementierung verschachtelter Routen in V4 zeige.

23
Dez

Ich dachte nur, ich muss das teilen. Wenn Sie eine Link-Komponente in Ihrer Header-Komponente verwenden. Die Antwort oben funktioniert nicht. Sie müssten die BrowserRouter erneut als übergeordnetes Element definieren, um Link zu unterstützen. Mach es so:

<BrowserRouter>
 <Layout>
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/other" component={OtherComponent} />
    <Route component={Error404} />
  </Switch>
 </Layout>
</BrowserRouter>
13
loQ

Ich würde diese Struktur ohne props.children verwenden:

const Main = () => (
  <main>
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route component={Error404} />
    </Switch>
  </main>
)

const Layout = () => (
  <div>
    <Header />
    <Main />
    <Footer />
  </div>
)

ReactDOM.render((
    <Provider store={store}>
      <BrowserRouter>
        <Layout />
      </BrowserRouter>
   </Provider>
), document.getElementById('root'))
2
zarcode

Bitte lesen Sie diesen Blog durch. https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a

Nicht mehr <IndexRoute>

Die Komponente darf eine Route zu einer bestimmten Komponente auf einem Pfad der obersten Ebene in Version 3 weiterleiten:

// in src/MyApp.js
const MyApp = () => (
    <Router history={history}>
        <Route path="/" component={Layout}>
            <IndexRoute component={Dashboard} />
            <Route path="/foo" component={Foo} />
            <Route path="/bar" component={Bar} />
        </Route>
    </Router>
)

Diese Komponente existiert in v4 nicht mehr. Um es zu ersetzen, verwenden Sie eine Kombination aus, genau und Routenreihenfolge (letzte Platzierung der Indexroute):

  // in src/MyApp.js
const MyApp = () => {
    <Router history={history}>
        <Route path="/" component={Layout} />
    </Router>
}
// in src/Layout.js
const Layout = () => (
    <div className="body">
        <h1 className="title">MyApp</h1>
        <div className="content">
            <Switch>
                <Route exact path="/foo" component={Foo} />
                <Route exact path="/bar" component={Bar} />
                <Route exact path="/" component={Dashboard} />
            </Switch>
        </div>
    </div>
);
1
Kiry Meas

Hinzufügen zu @Dez Antwort

Komplette native/Core-Implementierung mit Redux-Unterstützung

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Route, Switch } from 'react-router';
import createMemoryHistory from 'history/createMemoryHistory';

const history = createMemoryHistory();

import App from './components/App';
import Home from './components/Home';
import Login from './components/Login';
import store from './store';

ReactDOM.render((
  <Provider store={ store }>
    <Router history={history}>
      <App>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/login" component={Login} />
        </Switch>
      </App>
    </Router>
  </Provider>
), document.getElementById('root'));

App.js

import Header from './Header';
import Home from './Home';
import React from 'react';
import {connect} from 'react-redux';

const mapStateToProps = state => ({appName: state.appName});

class App extends React.Component {
  render() {
    return (
      <div >
        <Header appName={this.props.appName} /> {/*common header*/}
        {this.props.children}
      </div>
    );
  }
}

export default connect(mapStateToProps, () => ({}))(App);
1
Vivek Bharatha

Bei Verwendung mit Redux ohne das Switch-Element

AppRouter.js

import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'



const AppRouter = () => (
  <Layout>
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>
        </nav>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
        <Route path="/contact" component={Contact}/>
      </div>
    </Router>
  </Layout>
)

export default AppRouter;

Layout.js

const Layout = props => ({
  render() {
    return (
      <div className="container">
        <Header />
        <main>{props.children}</main>
        <Footer />
      </div>
    );
  }
});

export default Layout;

Anbieter in Render-Funktion gestellt

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';


import AppRouter from './AppRouter';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <AppRouter />
  </Provider>
  , document.getElementById('app'));
0
Homam Bahrani