通过在react-router的地址栏中键入地址直接访问路由器

Question

使用react-router(V4)有两种"主要"方式; 第一种方法是使用哈希路由器,您可以通过在浏览器的地址栏上键入它来直接访问地址,但是您必须添加#到URL,另一种方法是使用BrowserRouter,它具有漂亮且用户友好的URL结构但是你不能直接键入地址以呈现路线.那么,我如何配置HashRouter无需#或配置BrowserRouter即可直接使用URL输入？是否可以使用.htaccess？怎么样？谢谢.

---

const React = require('react');
const ReactDOM = require('react-dom');
import { HashRouter as Router, Route, Link} from 'react-router-dom';



const routes = (
    <Router forceRefresh={false}>
        <div>
            <Route exact path="/" component={Firstpage}/>
            <Route exact path="/projects" component={Projectslist}/>
        </div>
    </Router>
);


ReactDOM.render(routes, document.getElementById('app'));

[在这种类型中,它与#mark一起使用.例如:localhost:2000 /#/ projects]

---

另一种类型:

const React = require('react');
const ReactDOM = require('react-dom');
import { BrowserRouter as Router, Route, Link} from 'react-router-dom';



const routes = (
    <Router forceRefresh={true}>
        <div>
            <Route exact path="/" component={Firstpage}/>
            <Route exact path="/projects" component={Projectslist}/>
        </div>
    </Router>
);


ReactDOM.render(routes, document.getElementById('app'));

[并且在这种类型中它没有#标记很好,但是不能直接在浏览器的地址栏上加载它.]

Answer 1

如果您使用 webpack-dev-server，则需要historyApiFallback: true在配置文件中进行设置。

https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback