React router concatenating routes

Palamar66 0
Viewed 34

I have 2 routes for one of my components

<Route exact path='/' component={HomePage} />
<Route exact path='/activities' component={ActivityDashboard} />
<Route path='/activities/:id' component={ActivityDetails} />
<Route
  key={location.key}
  path={['/createActivity', '/manage/:id']}
  component={ ActivityForm}
/>

If I'm using each "/createActivity", and "/manage/:id" (which is editing form's route) separately it's all fine, but if I'm pressing "create new" button (which supposed to call the ".../createActivity" route) while in editing form (".../manage/id route"), it is just concatenating both routes into ".../manage/createActivity" which is error in my case, and such page doesn't exist. Here is my whole ActivityForm component which is related to these routes as shown in the above piece of code.

export default observer(function ActivityForm() {
  const { activityStore } = useStore();
  const { selectedActivity, createActivity, updateActivity, loading, loadActivity, loadingInitial } = activityStore;
  const { id } = useParams<{id:string }>();

  const [activity, setActivity] = useState({
    id: '',
    title: '',
    category: '',
    description: '',
    date: '',
    city: '',
    venue: ''
  });

  useEffect(() => {
    if (id) loadActivity(id).then(activity => setActivity(activity!))
  }, [id, loadActivity]);

  function handleSubmit() {
    activity.id ? updateActivity(activity) : createActivity(activity);
  }

  function handleInputChange(event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
    const { name, value } = event.target;
    setActivity({ ...activity, [name]: value })
  }

  if (loadingInitial) return <LoadingComponents content='Loading activity...'></LoadingComponents>

  return (
    <Segment clearing>
      <Form onSubmit={handleSubmit} autoComplete='off'>
        <Form.Input placeholder="Title" value={activity.title} name='title' onChange={handleInputChange} />
        <Form.TextArea placeholder="Description" value={activity.description} name='description' onChange={handleInputChange} />
        <Form.Input placeholder="Category" value={activity.category} name='category' onChange={handleInputChange} />
        <Form.Input type='date' placeholder="Date" value={activity.date} name='date' onChange={handleInputChange} />
        <Form.Input placeholder="City" value={activity.city} name='city' onChange={handleInputChange} />
        <Form.Input placeholder="Venue" value={activity.venue} name='venue' onChange={handleInputChange} />
        <Button loading={loading} floated='right' positive type='submit' content='Submit' />
        <Button floated='right' type='button' content='Cancel' />
      </Form>
    </Segment>
  )
})

there are all lines containing Link This one is in the ActivitiesList component navigating to the details page

<Button as={Link} to={/activities/${activity.id}} floated='right' content='View' color='blue' />

and these 2 navigating to the editing form, and back to the list of all items

<Button as={Link} to={/manage/${activity.id}} basic color='blue' content='Edit' /> 
<Button as={Link} to='/activities' basic color='grey' content='Cancel' />

And create activity is NavLink

<Button as={NavLink} to='createActivity' positive content="Create Activity" />
react-router-dom react-router reactjs
1 Answers

I don't see any overt issues with the code other than it seems the one link to create an activity appears to be using a relative path value. Add a leading "/" to the path to make it an absolute path.

Example:

<Button
  as={NavLink}
  to="/createActivity"
  positive
  content="Create Activity"
/>
Drew Reese0
Related