有两种“主要”的方法来使用react-router (V4);第一种方法是使用散列路由器,你可以通过在浏览器的地址栏中输入地址来直接访问它,但是你必须在URL中添加一个#;另一种方法是使用BrowserRouter,它有一个漂亮的用户友好的URL结构,但是你不能直接输入地址来呈现路由。
我如何在没有#或配置BrowserRouter的情况下配置HashRouter,以便直接使用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'));
在此类型中,它与#标记一起工作。例如: 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'));
在这种类型下,没有#号也能工作得很好,但不能直接在浏览器的地址栏上加载。
发布于 2017-04-04 08:51:30
如果您使用的是webpack-dev-server,则需要在配置文件中设置historyApiFallback: true
。
https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback
https://stackoverflow.com/questions/43002188
复制相似问题