將路由器 dom 路由反應到 ItemDetail

Question

我正在做一個個人 React.js 項目。 我正在嘗試使用 react-router-dom，但我無法使其工作。 我在 App.js 中做了 BrowserRouter。 直到那里應用程序工作正常，但我無法使路由動態重定向到 map 項目。 我試圖按照文檔和一些教程沒有成功。 數據來自星球大戰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;

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 的文檔以獲取更多詳細信息。

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”路由，並且您希望在您的應用程序（路由 =“/”）啟動/加載時重定向到“/movies”**然后將路由邏輯包裝為 ，利用路由器 dom 的Redirect屬性從“/”重定向到“/movies”，並使用組件而不是元素來渲染相應的組件，並且每次執行路由時不要用<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>

); }