时间戳

首页 > 解决方案 > Switch 无法在反应路由器中渲染组件

reactjs - Switch 无法在反应路由器中渲染组件

问题描述

嘿伙计们，我有点坚持一个简单的问题，我的路由不起作用，不知道为什么

编码：

  <BrowserRouter>
<div className="App">
  <Header></Header>
    <Switch>
      <Route component={Home}  exact path='/'></Route>
      <Route component={ToyApp} exact path='/app'></Route>
    </Switch>
</div>
  </BrowserRouter>

导航栏：

   <nav>
        <BrowserRouter>
        <NavLink to='/'>Home</NavLink>
        <NavLink to='/app'>App</NavLink>
        </BrowserRouter>
    </nav>

即使我转到 /app，也只有 Home 组件呈现，当我更改它们的顺序时，只会出现 app 组件。

编辑：当我在浏览器中手动更改网址时它可以工作，所以问题一定出在导航上

标签： reactjsreact-router

解决方案

为什么Browser Router？如果您使用的是可以处理动态 URL 的动态服务器，那么您需要使用 BrowserRouter 组件，否则如果您使用的服务器仅提供您可以使用的静态文件HashRouter。

一个Link组件有一个 to 属性，它告诉 React Router 导航到的目的地。NavLink是 Link 的子类，它将样式信息添加到呈现的元素（您可以使用其中任何一个。）

您可以在 BrowserRouter 中使用您的组件。发布只是一个参考：

class App extends Component {
      render() {
        return (
        <BrowserRouter>
            <div>
              <ul>
                <li><Link to={'/'} className="nav-link"> Home </Link></li>
                <li><Link to={'/contact'} className="nav-link">Contact</Link></li>
              </ul>
              </nav>
              <hr />
              <Switch>
                  <Route exact path='/' component={Home} />
                  <Route path='/contact' component={Contact} />
              </Switch>
            </div>
          </BrowserRouter>
        );
      }
    }

更多信息：https ://www.techiediaries.com/react/react-router-5-4-tutorial-examples/

推荐阅读