React/Router 不渲染組件

Question

我有反應路由器的問題，無法呈現我的所有頁面/組件。 因此，當我單擊第 1 頁時，它會呈現其中的內容，但是當我單擊第 2 或 3 頁時，它不會呈現它。 它只呈現第一個組件/頁面 1。如果可能，我想要一些幫助。

function App() {
  return (
    <div className="App">
     <NavBar/>
    <Router>
    <Switch>
     
     <Route exact path='/Page1' component={Page1}/>
        <Page1/>
     <Route exact  path='/Page2' component={Page2}/>
        <Page2/>
     <Route exact path='/Page3' component={Page3}/>
        <Page3/>
      <Route exact path='/' component={Home}/>

     </Switch>
     </Router>
     
      
    </div>
  );
}

export default App;




function NavBar(props) {
    return (
        <Router>
        <div className="nav">
             <div className="nav1">
            <Link to='/'> 
             Home
            </Link>

            <Link to='/page1'> 
             Page 1
            </Link>

            <Link to='/page2'> 
              Page2
            </Link>
      
            <Link to='/page3'> 
              Page3
            </Link>
         </div>
          </div>
          </Router>

        )
}

export default NavBar  

Answer 1

您的鏈接沒有指向相同的路線，您打錯了，將您的 to="/page1" 更改為 to='/Page1'

Answer 2

我認為您在這里有一些錯誤：

1. 你的路徑和枝形吊燈指出的不一樣
2. 您的路線聲明不正確：

關於第 2 點的更多信息：

你聲明了一個路由，你傳遞了一個組件 prop，但你也渲染了它下面的實際頁面； 這是不正確的：

<Route exact path='/Page1' component={Page1}/>
  <Page1/>

我不確定您使用的是哪個版本的 React 路由器，但我認為您必須選擇 1 種方法； 要么傳遞組件道具，要么將實際內容呈現為 Route 組件的子級：

<Route exact path='/page1' component={Page1}/>

或者

<Route exact path='/page1'>
  <Page1 />
</Route>

Answer 3

有幾件事要討論。 讓我們逐一分解：

路由路徑不區分大小寫

路線路徑並不像我最初認為的那樣區分大小寫，而其他人對此問題的看法也是如此，但我建議您將它們保持完全相同以保持理智，並使其他開發人員不必懷疑

NavBar 不應該有自己的路由器

你的Router應該包裝你的導航欄和路由。 現在他們每個人都有獨特的路由器

React Router 完全脫離React.Context 。 您現在的層次結構是：

└── App
    ├── NavBar
    │   └── Router (Router A)
    └── Router (Router B)

所有 React Router HoC（ <Link/> 、 <Route/>等）都在useContext()調用useContext()以獲得由<Router/>創建的最近上下文。 由於<NavBar/>有它自己的Router ，它會影響到它。 你需要它是：

.
└── App
    └── Router (Only Router)
        └── NavBar

這樣NavBar的<Link/> s 將影響唯一且正確的路由器Context 。

不正確的開關孩子

<Switch/>應該只將Route或Redirect作為子項，您將普通組件作為子項，這也可能導致該問題

來自<Switch>#children: node

<Switch>所有子元素都應該是<Route>或<Redirect>元素。 只會呈現與當前位置匹配的第一個孩子。

工作示例

將所有這些放在一起，我們可以看一下以下示例：

 const {render} = ReactDOM; const {BrowserRouter: Router, Switch, Link, Route} = ReactRouterDOM; const BadNavBar = () => ( <div> <h2>Bad Nav Bar</h2> <p>This Nav Bar will affect its own personal Router</p> <Router> {/* Router A */} {/* * These Links will only change the path of Router A * because that is the context they will receive internally * when their components call for useHistory (this is hidden from you) */} <Link to="/">Home</Link> <Link to="/page1">Page 1</Link> <Link to="/page2">Page 2</Link> </Router> </div> ); const GoodNavBar = () => ( <div> <h2>Good Nav Bar</h2> <p>This Nav Bar will affect the "right" Router because that's the one Context it will use</p> <div> {/* * These Links will change the path of the nearest Router * in the component hierarchy (or throw an error if there is * no Router in the hierarchy) */} <Link to="/">Home</Link> <Link to="/page1">Page 1</Link> <Link to="/page2">Page 2</Link> </div> </div> ); const App = () => ( <div> <BadNavBar /> <Router> {/* Router B */} <GoodNavBar /> <Switch> <Route exact path="/">I'm Home</Route> <Route exact path="/page1">I'm Page 1</Route> <Route exact path="/page2">I'm Page 2</Route> </Switch> </Router> </div> ); render( <App />, document.getElementById("app") );

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/react-router-dom@5.2.0/umd/react-router-dom.js"></script> <div id="app"></div>

使用您的代碼的工作示例

基於上面的示例，您需要以下內容：

 const {render} = ReactDOM; const {BrowserRouter: Router, Switch, Link, Route} = ReactRouterDOM; const Home = () => <div>Home</div>; const Page1 = () => <div>Page 1</div>; const Page2 = () => <div>Page 2</div>; const Page3 = () => <div>Page 3</div>; function NavBar(props) { // Remove the Router here return ( <div className="nav"> <div className="nav1"> <Link to='/'> Home </Link> <Link to='/page1'> Page 1 </Link> <Link to='/page2'> Page2 </Link> <Link to='/page3'> Page3 </Link> </div> </div> ); } // export default NavBar function App() { // Move NavBar into the Router // Remove the explicit pages since that's what the Routes are for return ( <div className="App"> <Router> <NavBar/> <Switch> <Route exact path='/Page1' component={Page1}/> {/*<Page1/>*/} <Route exact path='/Page2' component={Page2}/> {/*<Page2/>*/} <Route exact path='/Page3' component={Page3}/> {/*<Page3/>*/} <Route exact path='/' component={Home}/> </Switch> </Router> </div> ); } // export default App; render( <App />, document.getElementById("app") );

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/react-router-dom@5.2.0/umd/react-router-dom.js"></script> <div id="app"></div>

Answer 4

你打錯了：/page1 !== /Page1

聲明一個常量變量以保持一致性。 例如：

const route = "/home";
function App() {
  return (
    <div className="App">
     <NavBar/>
    <Router>
    <Switch>
       <Route exact path={route} component={Page1}/>
     </Switch>
     </Router>
     
      
    </div>
  );
}

export default App;




function NavBar(props) {
    return (
        <Router>
        <div className="nav">
             <div className="nav1">
            <Link to={route}> 
             Page 1
            </Link>
         </div>
          </div>
          </Router>

        )
}

export default NavBar