entityMap|blocks|key|ajkdc|text|您可以使用重定向而不是DefaultRoute|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3tuv4|更新2019-08-09以避免刷新问题，感谢Ogglas^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

You can use Redirect instead of DefaultRoute

<pre><code>&lt;Redirect from="/" to="searchDashboard" /&gt;
</code></pre>

Update 2019-08-09 to avoid problem with refresh use this instead, thanks to Ogglas

<pre><code>&lt;Redirect exact from="/" to="searchDashboard" /&gt;
</code></pre>

entityMap|blocks|key|d1h7h|text|使用的问题是如果你有一个不同的URL|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9sasn|当用户点击刷新或获取发送给他们的URL时，用户将被重定向至|5immv|不管怎样。|57qa8|如果您不希望用户能够刷新站点或发送URL，请使用以下命令：|8pmmh|(
++++
)}/>|code-block|syntax|javascript|6m3bp|在以下情况下使用此选项|dlds0|是登录的幕后黑手：|568lu|(
++loggedIn+?+(
++++
++)+:+(
++++
++)
)}/>^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|T|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|U|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|V|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|W|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|X|9|@]|A|@]|B|$L|M]]|$2|N|4|O|6|7|8|Y|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|Z|9|@]|A|@]|B|$]]|$2|R|4|S|6|K|8|10|9|@]|A|@]|B|$L|M]]]]

The problem with using <code>&lt;Redirect from="/" to="searchDashboard" /&gt;</code> is if you have a different URL, say <code>/indexDashboard</code> and the user hits refresh or gets a URL sent to them, the user will be redirected to <code>/searchDashboard</code> anyway.

If you wan't users to be able to refresh the site or send URLs use this:

<pre><code>&lt;Route exact path="/" render={() =&gt; (
 &lt;Redirect to="/searchDashboard"/&gt;
)}/&gt;
</code></pre>

Use this if <code>searchDashboard</code> is behind login:

<pre><code>&lt;Route exact path="/" render={() =&gt; (
 loggedIn ? (
 &lt;Redirect to="/searchDashboard"/&gt;
 ) : (
 &lt;Redirect to="/login"/&gt;
 )
)}/&gt;
</code></pre>

entityMap|blocks|key|entg6|text|我错误地尝试使用以下命令创建默认路径：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8b1tr|但这会创建两个不同的路径来呈现相同的组件。这不仅毫无意义，而且可能会导致UI出现小故障，例如，当您基于|bn5p0|..。|cva5t|创建默认路由(即不是索引路由)的正确方法是使用：|fsdc9|这基于react-router+1.0.0。请参见|37f9r|https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js|8oqtq^0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|P|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|Q|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|R|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|S|9|@]|A|@]|B|$]]|$2|M|4|F|6|7|8|T|9|@]|A|@]|B|$]]]]

I was incorrectly trying to create a default path with:

<pre><code>&lt;IndexRoute component={DefaultComponent} /&gt;
&lt;Route path="/default-path" component={DefaultComponent} /&gt;
</code></pre>

But this creates two different paths that render the same component. Not only is this pointless, but it can cause glitches in your UI, i.e., when you are styling <code>&lt;Link/&gt;</code> elements based on <code>this.history.isActive()</code>.

The right way to create a default route (that is not the index route) is to use <code>&lt;IndexRedirect/&gt;</code>: 

<pre><code>&lt;IndexRedirect to="/default-path" /&gt;
&lt;Route path="/default-path" component={DefaultComponent} /&gt;
</code></pre>

This is based on react-router 1.0.0. See <a href="https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js">https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js</a>.

entityMap|blocks|key|9bvlk|text|乔纳森的回答似乎对我不起作用。我使用的是React+v0.14.0和React+Router+v1.0.0-rc3。这样做了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|63i28|..。|ed6um|所以在Matthew的案例中，我相信他会想：|5kvt5|eaok4|来源：|4tk6l|https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ComponentLifecycle.md^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|M|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|N|9|@]|A|@]|B|$]]|$2|G|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|H|4|I|6|7|8|P|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|Q|9|@]|A|@]|B|$]]]]

Jonathan's answer didn't seem to work for me. I'm using React v0.14.0 and React Router v1.0.0-rc3. This did:

<code>&lt;IndexRoute component={Home}/&gt;</code>.

So in Matthew's Case, I believe he'd want:

<code>&lt;IndexRoute component={SearchDashboard}/&gt;</code>.

Source: <a href="https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ComponentLifecycle.md">https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ComponentLifecycle.md</a>

entityMap|blocks|key|fvt74|text|更新|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ebufi|：2020|5tooo|不使用重定向，只需在|1sp78|示例：^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|J|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|K|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|L|9|@]|A|@]|B|$]]]]

UPDATE : 2020

Instead of using Redirect, Simply add multiple route in the <code>path</code>

Example: 

<pre><code>&lt;Route exact path={["/","/defaultPath"]} component={searchDashboard} /&gt;
</code></pre>

entityMap|blocks|key|celkf|text|import+{+Route,+Redirect+}+from+"react-router-dom";

class+App+extends+Component+{
++render()+{
++++return+(
++++++
++++++++
++++++++++
++++++++
//rest+of+code+here


this+will+make+it+so+that+when+you+load+up+the+server+on+local+host+it+will+re+direct+you+to+/something|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript^0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$C|D]]]]

<pre><code>import { Route, Redirect } from "react-router-dom";

class App extends Component {
 render() {
 return (
 &lt;div&gt;
 &lt;Route path='/'&gt;
 &lt;Redirect to="/something" /&gt;
 &lt;/Route&gt;
//rest of code here
</code></pre>

this will make it so that when you load up the server on local host it will re direct you to /something

entityMap|blocks|key|83s7q|text|我遇到了类似的问题；如果没有匹配的路由处理程序，我想要一个默认的路由处理程序。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3gcnv|我的解决方案是使用通配符作为路径值。ie还确保它是您的路由定义中的最后一个条目。^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

I ran into a similar issue; I wanted a default route handler if none of the route handler matched.

My solutions is to use a wildcard as the path value. ie
Also make sure it is the last entry in your routes definition.

<pre><code>&lt;Route path="/" component={App} &gt;
 &lt;IndexRoute component={HomePage} /&gt;
 &lt;Route path="about" component={AboutPage} /&gt;
 &lt;Route path="home" component={HomePage} /&gt;
 &lt;Route path="*" component={HomePage} /&gt;
&lt;/Route&gt;
</code></pre>

entityMap|blocks|key|dj6ja|text|对于即将进入2017年的客户，这是一个新的解决方案，|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

For those coming into 2017, this is the new solution with <code>IndexRedirect</code>:

<pre><code>&lt;Route path="/" component={App}&gt;
 &lt;IndexRedirect to="/welcome" /&gt;
 &lt;Route path="welcome" component={Welcome} /&gt;
 &lt;Route path="about" component={About} /&gt;
&lt;/Route&gt;
</code></pre>

entityMap|blocks|key|c6ioa|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|-4|5|6|7|B|8|@]|9|@]|A|$]]]]

<pre><code> &lt;Route name="app" path="/" handler={App}&gt;
 &lt;Route name="dashboards" path="dashboards" handler={Dashboard}&gt;
 &lt;Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} /&gt;
 &lt;Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} /&gt;
 &lt;DefaultRoute handler={DashboardExplain} /&gt;
 &lt;/Route&gt;
 &lt;Redirect from="/*" to="/" /&gt;
 &lt;/Route&gt;
</code></pre>

entityMap|blocks|key|dgqb0|text|首选方法是使用react路由器|type|unstyled|depth|inlineStyleRanges|entityRanges|data|96nm|IndexRoutes|dkm1i|组件|c985u|您可以这样使用它(取自上面链接的react路由器文档)：^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|J|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|K|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|L|9|@]|A|@]|B|$]]]]

The preferred method is to use the react router <a href="https://github.com/ReactTraining/react-router/blob/master/docs/guides/IndexRoutes.md" rel="nofollow noreferrer">IndexRoutes</a> component

You use it like this (taken from the react router docs linked above):

<pre><code>&lt;Route path="/" component={App}&gt;
 &lt;IndexRedirect to="/welcome" /&gt;
 &lt;Route path="welcome" component={Welcome} /&gt;
 &lt;Route path="about" component={About} /&gt;
&lt;/Route&gt;
</code></pre>

entityMap|blocks|key|2f0bg|text|首先你需要安装：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ap1cp|npm+install+react-router-dom;|code-block|syntax|javascript|5ssal|然后你需要使用你的App.js+(在你的例子中它可以是不同的)并做下面的修改。在这种情况下，我选择重定向以获得适当的渲染过程。|ced8p|import+{+BrowserRouter+as+Router,+Route,+Switch,+Redirect+}+from+"react-router-dom";


++++++++}>|4e0r0|你成功地完成了上面的修改，你可以看到重定向URL在你的浏览器路径上，渲染过程也根据它们的组件正常工作。|4j59|不久前，我们有机会在react路由中使用名为"DefaultRoute“的组件。|eu20n|现在，它的方法已经不再流行，您可以创建名为default或其他名称的自定义路由，但在现代React.js开发中，它仍然不是这样做的。|ben9v|这只是因为使用"DefaultRoute“路线，我们可能会导致一些渲染问题，这是我们绝对想要避免的事情。^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|T|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|U|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|V|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|W|9|@]|A|@]|B|$F|G]]|$2|L|4|M|6|7|8|X|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|Y|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|Z|9|@]|A|@]|B|$]]|$2|R|4|S|6|7|8|10|9|@]|A|@]|B|$]]]]

Firstly u need to install:
<pre><code>npm install react-router-dom;
</code></pre>
Then u need to use your App.js (in your case it can be different) and do the modification below.
In this case I selected the Redirect to get proper rendering process.
<pre><code>import { BrowserRouter as Router, Route, Switch, Redirect } from &quot;react-router-dom&quot;;

&lt;Router&gt;
 &lt;Suspense fallback={&lt;Loading /&gt;}&gt;
 &lt;Switch&gt;
 &lt;Route exact path=&quot;/&quot;&gt;
 &lt;Redirect to=&quot;/Home&quot; component={Routes.HomePage}/&gt;
 &lt;/Route&gt;
 &lt;Route exact path=&quot;/Biz&quot; component={Routes.Biz} /&gt;
 &lt;/Switch&gt;
 &lt;/Suspense&gt;
 &lt;/Router&gt;
</code></pre>
U successfully do the modification above u can see the redirect URL is on your browser path and rendering process also working properly according to their component.
Some time ago, we had an opportunity to use the component named &quot;DefaultRoute&quot; in the react routing.
Now, its depreciated method, and it’s not so popular to use it, you can create the custom route named default or whatever, but still, it’s not how we do it in modern React.js development.
It’s just because using the &quot;DefaultRoute&quot; route, we can cause some rendering problems, and its the thing that we definitely would like to avoid.

entityMap|blocks|key|6bt8a|text|您可以像这样使用它来重定向到特定的URL，并在从旧路由器重定向到新路由器之后呈现组件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

You use it like this to redirect on a particular URL and render component after redirecting from old-router to new-router.

<pre><code>&lt;Route path="/old-router"&gt;
 &lt;Redirect exact to="/new-router"/&gt;
 &lt;Route path="/new-router" component={NewRouterType}/&gt;
&lt;/Route&gt;
</code></pre>

I have the following:

<pre><code> &lt;Route name="app" path="/" handler={App}&gt;
 &lt;Route name="dashboards" path="dashboards" handler={Dashboard}&gt;
 &lt;Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} /&gt;
 &lt;Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} /&gt;
 &lt;DefaultRoute handler={DashboardExplain} /&gt;
 &lt;/Route&gt;
 &lt;DefaultRoute handler={SearchDashboard} /&gt;
 &lt;/Route&gt;
</code></pre>

When using the DefaultRoute, SearchDashboard renders incorrectly since any *Dashboard needs to rendered within Dashboard.

I would like for my DefaultRoute within the "app" Route to point to the Route "searchDashboard". Is this something that I can do with React Router, or should I use normal Javascript (for a page redirect) for this? 

Basically, if the user goes to the home page I want to send them instead to the search dashboard. So I guess I'm looking for a React Router feature equivalent to <code>window.location.replace("mygreathostname.com/#/dashboards/searchDashboard");</code>

How to set the DefaultRoute to another Route in React Router

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 我有以下几点： 使用DefaultRoute时，SearchDashboard呈现不正确，因为 * 仪表板需要在仪表板中呈现。 我希望“应用”路由中的DefaultRoute指向路由"searchDashboard“。这是我可以用React Router做的事情，还是我应该使用普通的Javascript (用于页面重定向)来做这件事？ 基本上，如果用户转到主页，我希望将它们发送到搜索仪表板。因此

问如何在React路由器中将DefaultRoute设置为另一条路由
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在React路由器中将DefaultRoute设置为另一条路由EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在React路由器中将DefaultRoute设置为另一条路由
EN