使用している言語・ライブラリ
ruby on rails react react-router-dom
解決したいこと
・URLに「#」が含まれないようにしたい
発生している現象など
・localhost:3000 に アクセスすると localhost:3000/#/にリダイレクトする(画面表示は問題ない)
・article側も localhost:3000/#/articles にはアクセスできる
・直打ちで localhost:3000/articles に アクセスすると、javascript/components/App.jsxのSwitchパスを認識せず、railsのルートチェックでそのパスはないエラー画面に遷移してしまう
(javascript/components/App.jsxのNavigationにHomeとArticlesのリンクがあります)
ソース一部抜粋
routes.rb
Rails.application.routes.draw do root to: 'pages#index' namespace :api do resources :articles end end
pages/index.html
<div id="root"></div> <%= javascript_pack_tag 'application' %>
javascript/packs/application.jsx
import React from 'react'; import ReactDOM from 'react-dom'; import App from '../components/App'; import './stylesheets/app.css' document.addEventListener("DOMContentLoaded", function(event) { ReactDOM.render(<App />, document.getElementById('root')); });
javascript/components/App.jsx
class App extends Component { render() { return ( <div className="App"> <div className="init">init</div> <Router> <div className="container"> <Navigation /> <Main /> </div> </Router> </div> ); } } const Navigation = () => ( <nav className="navbar navbar-expand-lg navbar-dark bg-dark"> <ul className="navbar-nav mr-auto"> <li className="nav-item"><NavLink exact className="nav-link" activeClassName="active" to="/">Home</NavLink></li> <li className="nav-item"><NavLink exact className="nav-link" activeClassName="active" to="/articles">Articles</NavLink></li> </ul> </nav> ); const Main = () => ( <Switch> <Route exact path="/" component={Home} /> <Route exact path="/articles" component={ArticleList} /> <Route exact path="/articles/new" component={ArticleAdd} /> <Route exact path="/articles/:id" component={ArticleInfo} /> <Route exact path="/articles/:id/edit" component={ArticleEdit} /> </Switch> );
javascript/components/Home.jsx
import React from 'react'; const Home = (props) => { return ( <div className="jumbotron"> <h1>Home Page</h1> </div> ); } export default Home;
URLに「#」を含まないようにすることは可能なのでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。