时间戳

首页 > 解决方案 > 尝试加载其他页面时，React Router 正在加载我的主页

javascript - 尝试加载其他页面时，React Router 正在加载我的主页

问题描述

我有一个在 App.js 中加载的 MainPage，但是当我使用 Browser Router 和 Route 时，它​​将保留 MainPage 并在其顶部加载第二页。任何提示都会有所帮助。

class App extends Component {
  render() {
    return(
      <BrowserRouter>
        <div className="App">
          <Mainpage></Mainpage> 
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

另一件奇怪的事情是它正在加载页面的背景和样式，当按钮甚至没有被按下时它正在路由到它。这是主页。

class Mainpage extends Component {
  render() {
    return (
      <div>
        <header>
          <nav>
            <ul>
              <li>
                <Link exact to="/meettheteam">
                  This is a new Page
                </Link>
              </li>
            </ul>
          </nav>
        </header>
        <h1>
          THE
          <br />
          BARBER
          <br />
          SHOP
        </h1>
        <p>
          <img src={logo} alt="logo" />
          <img src={facebookLogo} alt="logoFacebook" />
          <img src={twitterLogo} alt="logoTwitter" />
          @TheBarberShop
        </p>
        <ul>
          <div className="schedule">
            <li>SCHEDULE</li>
          </div>
          <div className="styles">
            <li>STYLES</li>
          </div>
          <div className="meettheteam">
            <li>MEET THE TEAM</li>
          </div>
        </ul>
        <Switch>
          <Route exact path="/meettheteam" component={MeetTheTeam} />
        </Switch>
        {/* <Route path="/stylesandprices" component={StylesAndPrices}/> */}
      </div>
    );
  }
}

export default Mainpage;

标签： javascriptreactjs

解决方案

路由应该包裹在<Switch>react-router-dom 的组件中

正确用法：

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import ComponentA from './componenta'
import ComponentB from './componentb'

function App() {

  return (
      <Router>
        <Switch>
          <Route path="/">
            <ComponentA />
          </Route>
          <Route path="/componentb">
            <ComponentB />
          </Route>
        </Switch>
      </Router>
  );
}

export default App

下面的这个例子将第一条路线和第二条路线相互叠加，这与问题的代码片段的结构类似。第一条路线被包裹，Switch而第二条路线在外面Switch

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import ComponentA from './componenta'
import ComponentB from './componentb'

function App() {

  return (
      <Router>
        <Switch>
          <Route path="/">
            <ComponentA />
          </Route>
        </Switch>
        <Route path="/">
          <ComponentB />
        </Route>
      </Router>
  );
}

export default App;

提示/建议：

最好的办法是将所有Route's withSwitch语句包装在应用程序层次结构的顶层

推荐阅读