React in Rails - No routes matched location issue

user_13651669 0
Viewed 360

I'm trying to use React in my small code along project. I have a code in a few places, but I hope someone will be able to help.

routes.rb

 Rails.application.routes.draw do
  root 'pages#index'

  namespace :api do
    namespace :v1 do
      resources :airlines, param: :slug
      resources :reviews, only: [:create, :destroy]
    end
  end

  get '*path', to: 'pages#index', via: :all
end

App.js

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Airlines from './Airlines'
import Airline from './Airline'

const App = () => {
  return (
    <Routes>
      <Route path="//*" element={<Airlines />} />
      <Route path="/airlines/:slug" element={<Airline />} />
    </Routes>
  )
}

export default App

Airline.js

import React from "react";

const Airline = () => {
  return <div>This is the Airlines#show view for this app</div>
}

export default Airline

I'm getting No routes matched location "/airlines/correct slug name" error, but I can't really pinpoint where is my issue.

My show in the controller does this:

def show
  airline = Airline.find_by(slug: params[:slug])
  render json: AirlineSerializer.new(airline, options).serialized_json
end
reactjs routes ruby-on-rails
1 Answers

You just remove index routes code and add only in App.js file like this:-

App.js

import React from 'react';
import {BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import Airlines from './Airlines/Airlines';
import Airline from './Airline/Airline';

const App = () => {
    return(
        <Router>
            <Routes>
                <Route exact path="/" element={<Airlines />} />
                <Route exact path="/:slug" element={<Airline />} />
            </Routes>
        </Router>
    )
}

export default App;

After so many R&D I finally got resolution if not working in your side please let me know i will help you definitely

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from '../components/App'

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <App />,
    document.body.appendChild(document.createElement('div')),
  )
})

I Hope this is useful for you!

user_177726470
Related