将路由器 dom 路由反应到 ItemDetail

Question

我正在做一个个人的 React.js 项目。我正在尝试使用 react-router-dom，但我无法使其工作。我在 App.js 中做了 BrowserRouter。直到那里应用程序工作正常，但我无法使路由动态重定向到地图项。我试图按照文档和一些教程没有成功。数据来自Star Wars API这是代码： App.js：

import './App.css';    
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";    
import Home from './components/Home';
import MovieDetail from './components/MovieDetail'
import Navbar from './components/Navbar';

function App() {
  return (
    <Router>
      <>
      <Navbar />
        <Routes>
            <Route exact path='/' element={<Home />} />
        </Routes>    
        <Routes>
            <Route exact path to='/:movieId' element={<MovieDetail />} />
        </Routes> 
        </>  
    </Router>  
  );
}

export default App;

物品详情：

import { useEffect, useState } from "react";    
import { useParams } from "react-router-dom";

const MovieDetail = () => {
    const { movieId } = useParams();

    const [result, setResult] = useState([]);

    const fetchData = async () => {
        const res = await fetch("https://www.swapi.tech/api/films/");
        const json = await res.json();
        setResult(json.result);
    }
    useEffect(() => {
        fetchData();
    }, []);

    let movieMatch = (result.find(value) => value.properties.title == movieId)

    

    return (
        <div>
            <h2>
            {result
            .find((value) => {value.properties.title == movieId})}
            </h2>
        </div>
    );
}
 
export default MovieDetail;

更新 这是codesand 中完整代码的链接，其中包含更新的 App.js

Answer 1

根据您的代码，我假设您在项目中使用React Router v6。试试下面的代码：

import './App.css';    
import { BrowserRouter, Routes, Route } from "react-router-dom";    
import Home from './components/Home';
import MovieDetail from './components/MovieDetail'
import Navbar from './components/Navbar';

function App() {
  return (
    <BrowserRouter>
      <Routes>
      <Navbar />
        <Route path='/' element={<Home />} />
        <Route path=':movieId' element={<MovieDetail />} />
      </Routes>  
    </BrowserRouter>  
  );
}

export default App;

结帐React Router's Documentation了解更多详情。

Answer 2

如果您使用 index.js 作为 app.js 的包装器 <BrowserRouter /> or <Router /> 在您的情况下未在 app.js 中使用它在 index.js 中使用，否则它将无法工作

index.js 应该如下所示：-

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

function App() {
  return <h1>Hello React Router</h1>;
}

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

**例如，假设您有 "/movies" 路线，并且您希望您的应用程序 (route = "/") 启动/加载被重定向到“/电影”** 然后用*<Switch />*包装路由逻辑，利用路由器dom的Redirect属性从“/”重定向到“/movies”并使用component而不是element 来渲染相应的组件，并且不要在每次执行路由时都使用 <Routes> </Routes> 进行包装，就像我们在 index.js 中使用的那样

那么 app.js 将是：-

import './App.css';    
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";    
import Home from './components/Home';
import MovieDetail from './components/MovieDetail'
import Navbar from './components/Navbar';

function App() {
  return (
      <>
    <Navbar />
    <Switch>
            <Route exact path='/movies' component={<Home />} />   
            <Route exact path to='movies/:movieId' component={<MovieDetail />} 

    // to redirect from "/" to "/movies"
          <Redirect from="/" to="/students"></Redirect>

); }