如何與反應路由器共用組件？

Question

所以即時嘗試建立一個SPA（單頁面應用程序），我有點難以理解如何通過應用程序包含一個通用導航欄，而不需要通過整個應用程序。

香港專業教育學院，現在我的設計代碼的方式如下：

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

這是我的根元素使用browserouter。

，然後我在我的應用程序組件：

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

能有人指出什麼即時做錯了，我應該怎麼做，請爲我還沒有線索。

Answer 1

在你的應用程序組件使用Switch代替Router， 您正在使用兩臺路由器 你可以在瀏覽器中路由器

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

Answer 2

在給一個路由，應用程序做出反應路由器V4鼓勵你使用一個頂level BrowserRouter組件僅僅提供歷史API作爲上下文。如果您願意，您可以在應用中的不同位置同時呈現多條路線。嘗試使用<Switch>並將您的路線放在裏面。該組件將顯示類型爲<Route>的第一個與當前路徑匹配的子項。還提供exact道具以確保嵌套路線在深層嵌套可用時不顯示。你的最後一個例子可能是這個樣子：

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

而且裏面你categories你可以有必要的渲染路徑，像path和component道具。這使你的例子更加簡潔。

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>