如何与反应路由器共用组件？

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>