passing a dynamic url with React

Question

Thanks to everyone for your efforts to help me before at How to pass and retrieve data over the url in React I don't know why it wasn't working but I decided to simplify things and just pass a string instead of an object but it still isn't being read. Instead of having a dynamic url, it just passes the string ":i" or ":book.id" or whatever value I try to use in the Link tag.

App.js

    <Router>
      <div className="App">
        <Header />
        <Switch>
          <Route path="/" component={Main} />
          <Route path='/:i' component={Single} />
        </Switch>
      </div>
    </Router>

Main.js

const Main = () => {
  return (
    <div id="main">
      {data.map((book, i) => {
        return (
          <div key={i} className="squares">
            <img
              src={images[book.picture]}
              className="covers"
              alt="book cover"
            />
            <h3>
///////////////////////!!! HERE !!!/////////////////////////////////////
              **<Link to="/:i">{book.title}</Link>** 
            </h3>

Book.js

const Book = (props) => {

  let id = useParams();
  console.log("1", id); ////logs ':i'

Dmytro Biletskyi · Accepted Answer · 2020-06-08 21:17:56Z

4

You should not pass params in Link like this.

You pass parameter value, like id.

<Link to={`/${i}`}>

And then in route you receive it

<Switch>
  <Route path="/:id" children={<Child />} />
</Switch>

Here is doc with examples

edited Jun 8, 2020 at 21:17

answered Jun 8, 2020 at 21:02

Dmytro Biletskyi

1,90315 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dbrewster Over a year ago

I've tried that as well but using the template literal like that gives me a parsing error- Line 42:24: Parsing error: JSX value should be either an expression or a quoted JSX text

Dmytro Biletskyi Over a year ago

sorry, forgot {}.

Collectives™ on Stack Overflow

passing a dynamic url with React

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related