反应路由器不改变子页面答案

【问题标题】：React Router not changing sub page反应路由器不改变子页面
【发布时间】：2020-06-29 12:44:17
【问题描述】：

在我的 App.js 中，我有一个导航栏和一个路由器开关，可将我带到管理页面

 <Router>
        <Navbar />
        <Switch>
          <Route exact path='/' component={Welcome} />
          <AdminRoute path='/admin' component={Admin} />

我的 Admin 组件有一个子路由器，如下所示：

<Router>
    <SubNav />
    <Switch>
          <Route exact path={`${match.path}/planners`} component={Planners} />
          <Route exact path={`${match.path}/`} component = {Admin}>                
    </Switch>
</Router>

如果我去 www.mysite/admin 一切正常，我的 SubNav 链接工作正常。我的问题是我的导航栏有链接，如

 <Typography
              to='/admin/planners'
              component={Link}
            >
              Planners
            </Typography>
 <Typography
              to='/admin'
              component={Link}
            >
              Admin
            </Typography>

当我路由到子页面时，导航栏链接停止更改子页面，尽管它们正在更改 URL 就好了。第一次从导航栏链接有效，然后如果我尝试点击管理员，它不会再次路由到 /。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

我通过删除 <Switch> 并从 Admin 组件中删除 <Router> 解决了这个问题。 <Route> 单独使用而不用 <Router> 包装就足够了

下面是解释行为的代码

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function Resource1({ match }) {
  return (
    <div>
      <h3>Resource1</h3>
      <p>Resource1 Descriotion</p>
    </div>
  );
}
function Resource2({ match }) {
  return (
    <div>
      <h3>Resource2</h3>
      <p>Resource2 Descriotion</p>
    </div>
  );
}

function Topic1({ match }) {
  return (
    <div>
      <h2>Topic1</h2>
      <p>Topic1 Description</p>

      <ul>
        <li>
          <Link to={`${match.url}/resource1`}>Resource 1</Link>
        </li>
        <li>
          <Link to={`${match.url}/resource2`}>Resource 2</Link>
        </li>
      </ul>

      <hr />

      <Route path={`${match.path}/resource1`} component={Resource1} />
      <Route path={`${match.path}/resource2`} component={Resource2} />
    </div>
  );
}
function Topic2({ match }) {
  return (
    <div>
      <h2>Topic2</h2>
      <p>Topic2 Description</p>

      <ul>
        <li>
          <Link to={`${match.url}/resource1`}>Resource 1</Link>
        </li>
        <li>
          <Link to={`${match.url}/resource2`}>Resource 2</Link>
        </li>
      </ul>

      <hr />

      <Route path={`${match.path}/resource1`} component={Resource1} />
      <Route path={`${match.path}/resource2`} component={Resource2} />
    </div>
  );
}

function Topics({ match }) {
  return (
    <div>
      <h1>Topics</h1>
      <ul>
        <li>
          <Link to={`${match.url}/topic1`}>Topic 1</Link>
        </li>
        <li>
          <Link to={`${match.url}/topic2`}>Topic 2</Link>
        </li>
      </ul>

      <hr />

      <Route path={`${match.path}/topic1`} component={Topic1} />
      <Route path={`${match.path}/topic2`} component={Topic2} />
    </div>
  );
}

function Home() {
  return <h1>Home</h1>;
}

class App extends React.Component {
  render() {
    return (
      <Router>
        <div style={{ width: 1000, margin: '0 auto' }}>
          <ul>
            <li>
              <Link to='/'>Home</Link>
            </li>
            <li>
              <Link to='/topics'>Topics</Link>
            </li>
            <li>
              <Link to='/topics/topic1/resource1'>Resource 1</Link>
            </li>
          </ul>

          <hr />

          <Route exact path='/' component={Home} />
          <Route path='/topics' component={Topics} />
        </div>
      </Router>
    );
  }
}

export default App;

【讨论】：