反應<Link />路由器不工作。 反應 JS

Question

由於某種原因，我的導航無法正常工作我有另一個應用程序工作正常，但這個應用程序無法找到錯誤請幫助

我做錯了什么？ 我遵循了所有必需的步驟

反應路由器不工作。 反應 JS

我需要你的幫助。

使用 react-router 我可以使用 Link 元素來創建由 react 路由器本地處理的鏈接。

它只是不斷滾動。 我從不打開頁面

import './App.css';

import { CarsConsumer } from './components/Context';

import Car from './components/Car';
import CarsList from './components/CarsList';

import React, { Component } from 'react'

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

import Saved from './components/Saved';
import Help from './components/Help';
import Home from './components/Home';

export default class App extends Component {
  render() {
    return (<Router> 
      <div className="App">
        <header className="App-header">
        
                <nav>
                                <ul id='navUnorderedList'>
                                    <div id='leftNav'>
                                        <li>
                                            <Link to="/"> Home </Link>
                                        </li>
                                        <li>
                                            <Link to="/saved"> Saved </Link>
                                        </li>
                                    </div>
                                </ul>
                </nav>
                <Switch>
                        <Route path="/" component={ Home }>
                            
                        </Route>

                        <Route path="/saved" component={Saved}>

                        </Route>
                        
                        
                </Switch>
        

        <CarsList />
        </header>
      </div>
      </Router>
    )
  }
}

Answer 1

准確地放入您的家鄉路線

<Route path="/" exact component={ Home }>

為什么放精確會有所不同？

React 路由器做部分匹配，所以 /save 部分匹配 home 路由路徑，所以它會再次錯誤地返回 home 路由！

精確參數禁用路由的部分匹配，並確保僅當路徑與當前 url 完全匹配時才返回路由。

參考

代碼沙盒