React not routing to other than “/” route

问题:

I am not able to render any component on any route other than "/". Here is my code for routes.js

 import React from 'react'
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,
    Route,
} from 'react-router-dom'
import StockTable from './containers/stockTableContainer';
import StockDetail from './containers/stockDetailContainer';

export const getRoutes = (store) => {
 return(
     <Router>
    <div>
        <Route exact path ='/' component ={StockTable}/>
        <Route  path ='/details' component ={StockDetail}/>
    </div>
    </Router>
    )
  }

I can render the StockDetail component on "/" route but i can't route it on "/details".

I have also tried using but still couldn't render "/details"

full code at : https://github.com/shrutis18/stockApp

回答1:

You can use the Switch to your route as directed in the docs

<Switch>
   <Route path='some_path' component={Some component} />
</Switch>

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/basic-components.md

回答2:

If your application is hosted on a static file server, you need to use a <HashRouter> instead of a <BrowserRouter>.

This is because your server doesn't know how to handle requests made to a path other than /. For the BrowserRouter to work, any routable request should be served the index.html.

An excerpt from the FAQ

When you load the root page of a website hosted on a static file server (e.g., http://www.example.com), a <BrowserHistory> might appear to work. However, this is only because when the browser makes the request for the root page, the server responds with the root index.html file.

If you load the application through the root page, in-app navigation will work because requests are not actually made to the server. This means that if you load http://www.example.com and click a link to http://www.example.com/other-page/, your application will match and render the /other-page/ route.

However, you will end up with a blank screen if you were to refresh a non-root page (or just attempt to navigate directly to it). Opening up your browser's developer tools, you will see an error message in the console informing you that the page could not be loaded. This is because static file servers rely on the requested file actually existing.

Further along the lines

This is not an issue when your server can respond to dynamic requests. In that situation, you can instruct the server to catch all requests and serve up the same index.html file.