小编fue*_*fue的帖子

使用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')); …

我将参数从react-router的路径路径传递给组件,但在this.props对象中,'params'不存在

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

这是我的组成部分:

class Singleproject extends React.Component{
    constructor(props) {
        super(props);
    }

    componentWillMount(){
        window.document.title = "Wploper | Project title";
    }
    render(){
        return(
            <div>
                <Mainheader/>
                <div id="single-project-container" className="sheet-max-width">
                    <h2>{this.props.params}</h2>
                </div>
                <Mainfooter/>
            </div>
        );
    }
}

对象(this.props)没有参数: 在这里输入图像描述