React-Router BrowserRouter路径远离root的一个或多个目录不起作用,例如/生物技术/新

时间:2018-01-22 02:32:08

标签: reactjs react-router react-router-dom

设置React-Router BrowserRouter路径时,远离root的一个或多个目录的路径不起作用。 e.g。

<Route exact path="/portfolio/new" component={Portfolio} />
<Route exact path="/portfolio" component={Portfolio} />
  

'/ portfolio'有效但不是'/ portfolio / new'

     

'/ bio'有效,但不是'/ bio / new'

之前有人见过吗?

除了我添加第二个子目录(如'/ portfolio / new')外,我的所有路线都有效。

它看起来好像是我在Express路线中设置的404页面。然而,当我使用'/ anyhere'时,它使用react Browser Router *路由正确路由。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { PropTypes } from 'prop-types';
import { Provider, connect } from 'react-redux';

import store from './client/store';
import { history } from './client/history.js';

import { Home, About, Bio, Resume, Portfolio, Nav, Footer, Master } from './client/components';


ReactDOM.render(
<Provider store={store}>
    <Router path="/" history={history}>
        <div>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/about" component={About} />
                <Route exact path="/bio" component={Bio} />
                <Route exact path="/resume" component={Resume} />
                <Route exact path="/portfolio/new" component={Bio} />
                <Route exact path="/portfolio" component={Portfolio} />
                <Route exact path="/modal" component={Master} />
                <Route exact path="/master" component={Master} />
                <Route component={Home} />
                <Route path='*' component={Home} />
            </Switch>
        </div>
    </Router>
</Provider>,
document.getElementById('app')
);

1 个答案:

答案 0 :(得分:0)

Express或React路由器浏览器路由器不是问题。这是路径的问题。

它没有击中bundle.js,因为我在script标签中有一个相对路径。

e.g。改为