Wie gemeinsame Komponenten mit Reagieren Router haben?

Question

Also ich versuche, ein SPA (Single-Page-Anwendung) zu bauen, und ich bin ein wenig ratlos, wie Sie eine gemeinsame Navbar durch die App, ohne es durch die gesamte Anwendung enthalten.

Die Art und Weise mein Code ive jetzt gestaltet ist wie folgt:

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

das ist, wo ich browserouter am Stammelement verwenden.

und dann habe ich in meiner App-Komponente:

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

kann jemand darauf hinweisen, was im falsch zu machen und, wie ich es tun soll bitte, wie ich einen Hinweis havent.

Answer 1

in Ihrer App-Komponente Verwendung Switch statt Router, Sie verwenden zwei Router Sie eine Route für App im Browser Router geben kann

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

Answer 2

In React Router V4 Sie werden aufgefordert, eine Top-verwenden Level BrowserRouter-Komponente, um einfach die History-API als Kontext bereitzustellen. Sie können mehrere Routen gleichzeitig an verschiedenen Orten in Ihrer App darstellen, wenn Sie möchten. Versuchen Sie es mit <Switch> und platzieren Sie Ihre Routen darin. Diese Komponente zeigt den ersten untergeordneten Code vom Typ <Route> an, der dem aktuellen Pfad entspricht. Stellen Sie auch die exact Prop bereit, um sicherzustellen, dass verschachtelte Routen nicht angezeigt werden, wenn eine tiefere Verschachtelung verfügbar ist. Ihr letztes Beispiel wie folgt aussehen könnte:

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

Und in Ihrem categories Sie die Requisiten notwendig für die Darstellung der Route, wie path und component haben könnte. Dies macht Ihr Beispiel prägnanter.

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>