将路由器 dom 路由反应到 ItemDetail

Question

I am doing a personal React.js project. I am trying to use react-router-dom, but I haven't been able to make it work. I did the BrowserRouter in the App.js. Till there the app works fine, but I cannot make the routing redirect dynamically to a map item. I tried to follow the documentation and some tutorials unsuccesfully. The data comes from the Star Wars API This is the code: 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;

ItemDetail:

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

From your code I'm assuming you're using React Router v6 in your project. Try the below code:

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;

Checkout React Router's Documentation for more detail.

Answer 2

if you are using index.js as a wrapper for app.js <BrowserRouter /> or <Router /> in your case is not used in app.js it's used in index.js otherwise it will not work

index.js should look like this: -

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")
);

**For example just Let's say you are having "/movies" route and you want when ever your app (route = "/") starts / loads up to be redirected to "/movies" ** then wrap the routing logic with ,make use of Redirect property of router dom to redirect from "/" to "/movies" and use component instead of element to render the corresponding component plus dont wrap with <Routes> </Routes> every time you are doing the route as we used it in index.js

then app.js will be: -

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>

); }