Question

我有一个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>

Answer 1

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

Routes组件：我将要路由的组件导入了我的routes组件。如下。

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语句中包括以下内容。

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标记内。希望对您有所帮助。

Answer 2

包装顶部组件解决了问题

通过孙子组件中的链接管理路由

2 个答案: