2

我有一个 App 组件，它有子组件 NavigationBar。NavigationBar 也有子项，即 NavigationBarTabs。我想做的是在 App 组件中管理路由，但在 NavigationBarTabs 中有链接。如果我这样做，我只能通过刷新来获取App中的新内容。如果我在 App 组件中保留链接，它可以正常工作，但显然我希望这些链接位于 NavigationBarTabs 中。有什么办法可以做到吗？下面的例子：
点击链接后工作：

<BrowserRouter>
   <Route path ='/Profile' component = {Profile}/>
   <Route path ='/About' component={About}/>
   <Route path ='/Catalog' component={Catalog}/>
   <Link to={'/Profile'}>Profile</Link>
   <Link to={'/Catalog'}>Catalog</Link>
   <Link to={'/About'}>About</Link>
</BrowserRouter>

单击链接并刷新页面后工作：

<BrowserRouter>
   <NavigationBar/> <--- Tabs with Links are stored there, same 'to' prop
   <Route path ='/Profile' component = {Profile}/>
   <Route path ='/About' component={About}/>
   <Route path ='/Catalog' component={Catalog}/>
</BrowserRouter>
4

2 回答 2

0

我有一个类似的问题，我希望我的链接位于滑动侧栏中。这是我发现对我有用的一种方法。

路由组件：我将要路由到的组件导入到我的路由组件中。如下。

import React, {Component} from 'react'
import {BrowserRouter, Route, Link} from 'react-router-dom';
import Component from './component.js';

const routes = [
  {
  path: '/',
  exact: true,
  main: () => <place component here/>
  },
  {
  path: '/dogs',
  main: () => <place component here/>
  },
  {
  path: '/cats',
  main: () => <place component here/>
  }
];

export default routes;

侧边栏组件：然后我将链接放在我的侧边栏组件中，如下所示。

import React from 'react';
import './SideDrawer.css';
import {BrowserRouter, Route, Link} from 'react-router-dom';


const sideDrawer extends Component{

 render(){
  return(
   <nav className='sidebar'>
     <ul>
      <li><Link to='/'>Home</Link></li>
      <li><Link to='/dogs'>Dogs</Link></li>
      <li><Link to='/cats'>Cats</Link></li>
     </ul>
   </nav>
  );
 }
};

export default sideDrawer;

然后在将呈现我的页面的 App.js 组件中，我进行了以下导入：

import React, {Component} from 'react';
import SideDrawer from './components/SideDrawer/SideDrawer';
import {BrowserRouter, Route, Link} from 'react-router-dom';
import routes from './components/routes/routes.js';

然后在我的退货声明中包含以下内容。

return(
      <div style={{height:'100%'}}>
        <BrowserRouter>

        <SideDrawer/>
         <main>
          {routes.map((route) => (
           <Route
            key={route.path}
            path={route.path}
            exact={route.exact}
            component={route.main}
            />
          ))}
         </main>
        </BrowserRouter>
      </div>
    );
  }
}

请注意 App.js 返回语句中的所有内容都包含在 BrowserRouter 标记中。希望这可以帮到你。

于 2019-05-22T05:09:24.917 回答
0

包装顶部组件解决了问题

于 2019-05-22T22:57:14.897 回答