将路由器 dom 路由反应到 ItemDetail

Posted 2023-02-19

【中文标题】将路由器 dom 路由反应到 ItemDetail

【英文标题】：React router dom routing to ItemDetail

【发布时间】：2022-01-21 10:23:35

【问题描述】：

我正在做一个个人的 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

【参考方案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了解更多详情。

【讨论】：

感谢 Sanket 的帮助。但是，它没有用。是的，我使用的是 react-router-dom V6.2.1。我刚刚更新了帖子，我在沙箱中上传了整个代码。帖子底部有一个链接。

@JoaquinPalacios 好的。我会调查并更新我的答案。

【参考方案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>

);

【讨论】：

感谢艾哈迈德的帮助。不幸的是，它没有用。我只是在沙箱中上传代码。帖子底部有一个链接。

我确实使用元素而不是组件使其工作。但是，我不得不评论movieId的路线在哪里。

很高兴您找到了解决方案，祝您玩得愉快

嗨，艾哈迈德。谢谢你的帮助。我正在使用您回答中的一些提示。但是，我仍然遇到动态路由问题。如果你可以看一下，帖子上有一个代码和链接。

我无法打开沙盒链接请检查