React-router v4 下層ページがnot found

Question

React-routerを使い習作でWebサイトを作っております。
ルーティングする際の話なのですが、
たとえば/workにアクセスする場合、TOPページにランディングしてからナビゲーションなどで遷移すると正常に表示されるのですが

ローカルサーバー上ではこのようなことが起こらないのですが、どなたかご教示いただけないでしょうか。

ソースはこのようになっております


```ここに言語を入力
export default class extends Component{

	constructor( props ){
		super( props );
	}

	render(){
		return(
			<Router>
			<Route render={({location}) => (
				<main>
					<Loading />
					<Header />
					<TransitionGroup component={null}>
						<CSSTransition key={location.key} timeout={1000} classNames="is">
							<div className="transitionContent">
								<Switch location={ location }>
									<Route exact path="/" component={ Index } props  />
									<Route exact path="/minds" component={ DesignIs } props />
									<Route exact path="/works" component={ Works } props  />
									<Route path="/works/:id" component={ Work } props  />
									<Route exact path="/about" component={ About } props />
									<Route path="/about/biography" component={ Biography } props />
								</Switch>
								<Forms />
								<Footer />								
							</div>
						</CSSTransition>
					</TransitionGroup>
					<FooterBg />
					<ScrollMemory />
				</main>
			)}></Route>
			</Router>
		);
	}
}
```

Answer 1

react-routerの処理は、あくまでフロントエンド側の処理ですので、index.htmlからスタートしないと、働かないはずです。

ブラウザに直接入力されたURLは、そのディレクトリを探しに行くことになるので、not foundになります。

create-react-appのドキュメントに対応方法がいくつか挙げられています。

一番簡単なのは、nodeのserveを利用してWebサーバーを立ち上げる方法ですが、既存のWebサーバーを利用したいということであれば、index.htmlにリダイレクトする設定が必要になるようです。

Serving Apps with Client-Side Routing

Comments

[msysmsys]

ありがとうございます。試してみます！

もしまたなにか、どうしても手が出ない状況でしたら引き続きスレッドを更新させていただくかもしれませんがご容赦くださいませ。