Comment avoir des composants communs avec un routeur de réaction?

Question

Donc, je suis en train d'essayer de construire un SPA (application d'une page) et je suis un peu perplexe quant à la façon d'inclure une barre de navigation commune à travers l'application sans être inclus dans toute l'application.

La façon ive conçu mon code est maintenant comme suit:

ReactDOM.render(<Provider store={store}><BrowserRouter><App /></BrowserRouter></Provider>, document.getElementById('root')); 

c'est là que je l'utilise browserouter à l'élément racine.

puis j'ai dans mon élément App:

<div> 
    <Header /> 
    <Router> 
     <Route exact path='/' component={Post} /> 
     {this.props.categories && this.props.categories.map((cat, i) => { 
     console.log(cat.path) 
     return <Route path={`/${cat.path}`} component={array[i]} key={i} /> 
     })} 
    </Router> 
    </div> 

quelqu'un peut-il indiquer ce qui im ​​faire le mal et comment je devrais le faire s'il vous plaît que je nai un indice.

Answer 1

dans votre utilisation composants App Switch au lieu de Router, Vous utilisez deux routeurs vous pouvez donner un itinéraire pour App dans le navigateur Router

ReactDOM.render(<Provider store={store}><BrowserRouter><Route path="/" component={App} /></BrowserRouter></Provider>, document.getElementById('root')); 

Answer 2

dans React Router V4 nous vous encourageons à utiliser un top- niveau BrowserRouter composant simplement pour fournir l'API d'historique en tant que contexte. Vous pouvez réellement rendre plusieurs routes simultanément à différents endroits de votre application si vous le souhaitez. Essayez d'utiliser <Switch> et placez vos itinéraires à l'intérieur de cela. Ce composant affichera le premier de ses enfants de type <Route> correspondant au chemin actuel. Fournissez également le prop exact pour vous assurer que les itinéraires imbriqués ne sont pas affichés lorsqu'une imbrication plus profonde est disponible. Votre dernier exemple pourrait ressembler à ceci:

<div> 
    <Header /> 
    <Switch> 
     {categories.map(cat => <Route {...cat} />)} 
    </Switch> 
</div> 

Et dans votre categories vous pourriez avoir les accessoires nécessaires pour rendre la route, comme path et component. Cela rend votre exemple plus concis.

const Component = React.Component 
 
const { Switch, Route, Link } = ReactRouterDOM 
 
const Router = ReactRouterDOM.BrowserRouter 
 

 
const Home =() => <h1>Home</h1> 
 
const Post1 =() => <h1>React</h1> 
 
const Post2 =() => <h1>Redux</h1> 
 
const Post3 =() => <h1>Udacity</h1> 
 

 
const routes = [ 
 
\t { 
 
    \t name: 'Home', 
 
    \t path: '/', 
 
    component: Home 
 
    }, 
 
    { 
 
    \t name: 'React', 
 
    path: '/react', 
 
    component: Post1 
 
    }, 
 
    { 
 
    \t name: 'Redux', 
 
    \t path: '/redux', 
 
    component: Post2 
 
    }, 
 
    { 
 
    \t name: 'Udacity', 
 
    \t path: '/udacity', 
 
    component: Post3 
 
    } 
 
] 
 

 
const Header =() => <header> 
 
    <nav> 
 
    {routes.map(route => <Link to={route.path} key={route.path} >{route.name}</Link>)} 
 
    </nav> 
 
</header> 
 

 
class App extends Component { 
 
    constructor(props) { 
 
    super(props) 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <Header /> 
 
     <Switch> 
 
      {routes.map(route => <Route {...route} key={route.path} exact/>)} 
 
     </Switch> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
\t <Router><App/></Router>, 
 
    document.getElementById('container') 
 
);

<script src="https://unpkg.com/react@16/umd/react.development.js"></script> 
 
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> 
 
<script src="https://unpkg.com/react-router/umd/react-router.min.js"></script> 
 
<script src="https://unpkg.com/react-router-dom@4.2.0/umd/react-router-dom.min.js"></script> 
 
<div id="container"> 
 
    <!-- NOTE: in this embedded fiddle, React Router will not work. See https://jsfiddle.net/tay99xu0/ for working demo reference. --> 
 
</div>