我知道有几个帖子有类似的问题但不同的方法似乎无法理解。我想学习更多,并能够使用React.js和Laravel开发几个应用程序。
Header.js:导入文件
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Link,
Switch,
Route
} from 'react-router-dom';
import Home from './Home';
import About from './About';
import Dashboard from '../admins/Dashboard';
import Contact from './Contact';
路由器(BrowserRouter)
<Router>
<div>
<nav className="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<Link className="nav-link" to="/" exact
>Home</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">About Us</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/contact">Contact</Link>
</li>
</ul>
<form className="form-inline my-2 my-lg-0">
<input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<Switch>
<Route exact path='/' component={Home}/>
<Route exact path="/about" component={About}/>
<Route path='/contact' component={Contact}/>
<Route path='/admins/dashboard' component={Dashboard}/>
</Switch>
</div>
</Router>
当我单击链接时,它会显示链接,但每当我重试刷新页面时,它都会显示错误。我尝试了可能的例子,但似乎没有任何工作。我不知道我做错了。我一直试图看看如何解决这个问题。我发现一篇文章说不推荐使用createBrowserHistory而且反应路由器v4不支持,即使我很难实现这个例子。有没有更好的办法处理这个?
我有多个页面(组件)。
Index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
} from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';
export default class Index extends Component {
render() {
return (
<div>
<Header />
<Footer/>
</div>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(<Index />, document.getElementById('app'));
}
about.js
import React, { Component }from 'react';
import { Redirect } from 'react-router-dom';
class About extends Component {
constructor(props)
{
super(props);
}
render(){
return (
<div className="jumbotron">
<h2>About Us</h2>
</div>
);
}
}
export default About;
app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes React and other helpers. It's a great starting point while
* building robust, powerful web applications using React + Laravel.
*/
require('./bootstrap');
/**
* Next, we will create a fresh React component instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
require('./components/Index');
为了知识,我认为你做错了。您的index.js需要包含来自'react-router-dom'的import {BrowserRouter,Switch,Route}以及在BrowswerRouter的锚标记内定义的路由,即在
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Header from './Header';
import Footer from './Footer';
import Home from './Home';
import About from './About';
import Dashboard from '../admins/Dashboard';
import Contact from './Contact';
export default class Index extends Component {
render() {
return (
<BrowserRouter>
<div>
<Header/>
<Switch>
<Route exact path='/' component={Home}/>
<Route exact path='/about' component={About}/>
<Route path='/contact' component={Contact}/>
<Route path='/admins/dashboard' component={Dashboard}/>
</Switch>
<Footer/>
</div>
</BrowserRouter>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(<Index />, document.getElementById('app'));
}
由于这是Laravel Mix,预设反应,请转到您的路线下的web.php,以更改为Route :: view('/ {path?}','welcome');这意味着您将视图限制为页面,但从视图中呈现多个组件。
在welcome.blade.php中,确保避免绝对路径,使用类似这样的内容而不是href =“{{asset('css / app.css')}}”
在Header.js中,删除不必要的导入文件。从'react-router-dom'导入{Link};
如果您有任何挑战了解安排,您可以发送完整的header.js,welcome.blade.php等帮助