React <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 router 做部分匹配，所以 /save 部分匹配 home 路由路径，所以它会再次错误地返回 home 路由！

exact 参数禁用路由的部分匹配，并确保仅在路径与当前 url 完全匹配时才返回路由。

Reference

CodeSandBox