Percorsi nidificati con router react v4

Attualmente sto lottando con le rotte di nesting usando react router v4.

L’esempio più vicino è stato la configurazione del percorso nella documentazione di React-Router v4 .

Voglio dividere la mia app in 2 parti diverse.

Un frontend e un’area di amministrazione.

Stavo pensando a qualcosa del genere:

         

Il frontend ha un layout e uno stile diversi rispetto all’area di amministrazione. Quindi all’interno della prima pagina il percorso verso casa, verso e così dovrebbe essere il percorso dei bambini.

/ home dovrebbe essere reso nel componente Frontpage e / admin / home dovrebbe essere reso all’interno del componente Backend.

Ho provato alcune varianti ma ho sempre finito col non colpire / home o / admin / home.

Modifica – 19.04.2017

Perché questo post ha molte viste in questo momento, l’ho aggiornato con la soluzione finale. Spero che aiuti qualcuno.

Modifica – 08.05.2017

Rimosse vecchie soluzioni

Soluzione finale:

Questa è la soluzione finale che sto usando in questo momento. Questo esempio ha anche un componente di errore globale come una pagina 404 tradizionale.

 import React, { Component } from 'react'; import { Switch, Route, Redirect, Link } from 'react-router-dom'; const Home = () => 

Home

; const User = () =>

User

; const Error = () =>

Error

const Frontend = props => { console.log('Frontend'); return (

Frontend

Root

User

Backend

Swiggity swooty

Bottom
); } const Backend = props => { console.log('Backend'); return (

Backend

Root

User

Frontend

Swiggity swooty

Bottom
); } class GlobalErrorSwitch extends Component { previousLocation = this.props.location componentWillUpdate(nextProps) { const { location } = this.props; if (nextProps.history.action !== 'POP' && (!location.state || !location.state.error)) { this.previousLocation = this.props.location }; } render() { const { location } = this.props; const isError = !!( location.state && location.state.error && this.previousLocation !== location // not initial render ) return (
{ isError ? : }
) } } class App extends Component { render() { return } } export default App;

In react-router-v4 non si nidifica . Invece, li metti dentro un altro .


Per esempio

    

dovrebbe diventare

  

con

 const Topics = ({ match }) => ( 

Topics

Example topic
)

Ecco un esempio di base direttamente dalla documentazione del react-router.

Volevo solo menzionare react-router v4 cambiato radicalmente da quando questa domanda è stata postata / risposta.

Non c’è più nessun componente ! serve per assicurarsi che venga eseguita solo la prima corrispondenza. beh. Reindirizza a un’altra rotta. Usa o lascia fuori exact per inserire o escludere una corrispondenza parziale.

Vedi i documenti. Sono grandi. https://reacttraining.com/react-router/

Ecco un esempio che spero sia utilizzabile per rispondere alla tua domanda.

   
{ return (

Home menu

front back
); }} />
{ return (

front menu

help about
); }} />
{ return

front help

; }} />
{ return

front about

; }} />
{ return (

back menu

help about
); }} />
{ return

back help

; }} />
{ return

back about

; }} />

Spero che abbia aiutato, fammi sapere. Se questo esempio non risponde abbastanza bene alla tua domanda, dimmelo e vedrò se posso modificarlo.

È vero che per annidare i percorsi è necessario inserirli nel componente figlio del percorso.

Tuttavia, se preferisci una syntax più “in linea” piuttosto che rompere i tuoi Percorsi su componenti, puoi utilizzare il puntello di render su cui vuoi fare il nido, con un componente funzionale statico incorporato, in questo modo:

      ( <>     )} />  

Se ti interessa render perché il render debba essere usato al posto del component , è per impedire che il componente inline venga rimontato su ogni rendering. Vedi la documentazione per maggiori dettagli.

Si noti inoltre che l’esempio precedente utilizza React 16 Fragments per racchiudere i percorsi nidificati, solo per renderlo un po ‘più pulito. Prima di React 16 puoi semplicemente usare un contenitore

invece qui.

Qualcosa come questo.

 import React from 'react'; import { BrowserRouter as Router, Route, NavLink, Switch, Link } from 'react-router-dom'; import '../assets/styles/App.css'; const Home = () =>  

HOME

; const About = () =>

About

; const Help = () =>

Help

; const AdminHome = () =>

root

; const AdminAbout = () =>

Admin about

; const AdminHelp = () =>

Admin Help

; const AdminNavLinks = (props) => (

Admin Menu

Admin Home Admin Help Admin About Home {props.children}
); const NormalNavLinks = (props) => (

Normal Menu

Home Help About Admin {props.children}
); const App = () => (
); export default App;

Puoi provare qualcosa come Routes.js

 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 ( 
) } } export default Routes

App.js

 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 ( 
); } } export default App;

Penso che puoi ottenere lo stesso anche da qui.

Qui ho creato un esempio in TSX, se qualcuno vuole eliminare il prefisso del percorso wrapper nel percorso percorso figlio: https://stackoverflow.com/a/47891060/5517306

 interface IDefaultLayoutProps { children: React.ReactNode } const DefaultLayout: React.SFC = ({children}) => { return ( 
{children}
); } const LayoutRoute: React.SFC = ({component: Component, layout: Layout, ...rest}) => { const handleRender = (matchProps: RouteComponentProps<{}, StaticContext>) => ( ); return ( ); } const ScreenRouter = () => (
Home Counter
);