reactjs - react 路由器不工作。 react JS

Question

由于某种原因我的导航不工作我有另一个应用程序工作正常但是这个无法定位错误请帮助

我做错了什么？我遵循了所有必需的步骤

react 路由器不工作。 react JS

我需要你的帮助。

通过 react-router，我可以使用 Link 元素创建由 react router 本地处理的链接。

它只是不断滚动。我从不打开页面

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 准确放置

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

为什么输入准确会有所不同？

React router 做部分匹配，所以/save 部分匹配 home 路由路径，所以它会再次错误地返回 home 路由!

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

Reference

CodeSandBox